二、uniapp项目（分段器的使用、scroll-view、视频下载、转发）

一、分段器组件的使用

uniapp官方文档
在这里插入图片描述

在这里插入图片描述

<template><view class="category"><view class="category_tab"> <view class="category_tab_title"><view class="title_inner"><uni-segmented-control :current="current":values="items.map((item) => { return item.title})" @clickItem="onClickItem"styleType="text"activeColor="#d4237a"></uni-segmented-control></view><view class="search_img"><image src="../../static/icon/_search.png"></image></view></view><view class="category_tab_content">123</view></view></view>
</template><script>import {uniSegmentedControl} from '@dcloudio/uni-ui'export default {data() {return {items: [{title: '最新'},{title: '热门'}],current: 1}},components: {uniSegmentedControl},methods: {onClickItem(e) {if (this.current !== e.currentIndex) {this.current = e.currentIndex}}}}
</script><style lang="scss" scoped>.category_tab {.category_tab_title {display: flex;justify-content: center;align-items: center;.title_inner {width: 70%;}.search_img {width: 17px;height: 20px;padding-bottom: 1%;margin-left: 10rpx;image {width: 100%;height: 100%;}}}.category_tab_content {}}
</style>

二、scroll-view的使用

在这里插入图片描述

三、结合触底函数scrolltolower实现分页效果

在这里插入图片描述

<template><view class="category"><view class="category_tab"> <view class="category_tab_title"><view class="title_inner"><uni-segmented-control :current="current":values="items.map((item) => { return item.title})" @clickItem="onClickItem"styleType="text"activeColor="#d4237a"></uni-segmented-control></view><view class="search_img"><image src="../../static/icon/_search.png"></image></view></view><scroll-view @scrolltolower="handleScrolltolower" scroll-y enable-flex class="category_tab_content"><view class="cate_item"v-for="item in vertical":key="item.id"><image :src="item.img" mode="aspectFill"></image></view></scroll-view></view></view>
</template><script>import {uniSegmentedControl} from '@dcloudio/uni-ui'export default {data() {return {items: [{title: '最新',order: 'new'},{title: '热门',order: 'hot'}],current: 0, // 当前激活的标签页索引// 请求参数params: {limit: 30,skip: 0,order: "new"},id: 0,vertical: [], // 页面显示数据// 模拟的图片数组myImg: ["https://img0.baidu.com/it/u=1000551505,2077899926&fm=26&fmt=auto&gp=0.jpg","https://img0.baidu.com/it/u=1532752388,171944695&fm=26&fmt=auto&gp=0.jpg","https://img2.baidu.com/it/u=2026215452,3463309435&fm=26&fmt=auto&gp=0.jpg","https://img0.baidu.com/it/u=4255272445,3536412390&fm=26&fmt=auto&gp=0.jpg","https://img2.baidu.com/it/u=3589748713,2051752919&fm=26&fmt=auto&gp=0.jpg","https://img0.baidu.com/it/u=1156363733,1145018515&fm=26&fmt=auto&gp=0.jpg","https://img1.baidu.com/it/u=1572607292,2004901445&fm=26&fmt=auto&gp=0.jpg","https://img1.baidu.com/it/u=2629213230,2545258637&fm=26&fmt=auto&gp=0.jpg","https://img0.baidu.com/it/u=1817143901,1168063195&fm=26&fmt=auto&gp=0.jpg","https://img2.baidu.com/it/u=1814565549,2954866278&fm=26&fmt=auto&gp=0.jpg","https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg","https://img1.baidu.com/it/u=3771357394,1518226081&fm=26&fmt=auto&gp=0.jpg","https://img1.baidu.com/it/u=525722049,125546548&fm=26&fmt=auto&gp=0.jpg","https://img2.baidu.com/it/u=3566088443,3713209594&fm=26&fmt=auto&gp=0.jpg","https://img1.baidu.com/it/u=3886212450,854269223&fm=26&fmt=auto&gp=0.jpg"],hasMore: true // 是否还有下一页数据}},components: {uniSegmentedControl},onLoad(options) {this.id = options.idthis.getList()},methods: {onClickItem(e) {/* 1. 根据被点击的标题，切换标题2. 其替换order3. 重新发送请求*/if (this.current !== e.currentIndex) {this.current = e.currentIndex} else {// 当点击的是相同的标签时return}// 重置数据this.params.skip = 0this.vertical = []this.params.order = this.items[e.currentIndex].orderthis.getList()},getList () {this.request({url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,data: this.params}).then((res) => {if (res.data.res.vertical.length ===0) {this.hasMore = falseuni.showToast({title: "没有更多数据啦",icon: "none"})return}this.vertical = [...this.vertical, ...res.data.res.vertical]// console.log(res)this.changeImg(this.vertical)})},// 改变接口的imgurlchangeImg (iarray) {for(var i=0; i<iarray.length; i++) {var index = Math.floor(Math.random()*10)// iarray[i].img = "https://img2.baidu.com/it/u=1814565549,2954866278&fm=26&fmt=auto&gp=0.jpg"iarray[i].img = this.myImg[index]}},// 加载下一页数据handleScrolltolower () {if(this.hasMore) {this.params.skip += this.params.limitthis.getList()} else {uni.showToast({title: '没有更多数据啦',icon: "none"})}}}}
</script><style lang="scss" scoped>.category_tab {.category_tab_title {display: flex;justify-content: center;align-items: center;.title_inner {width: 70%;}.search_img {width: 17px;height: 20px;padding-bottom: 1%;margin-left: 10rpx;image {width: 100%;height: 100%;}}}.category_tab_content {display: flex;flex-wrap: wrap;height: calc( 100vh - 36px );.cate_item {width: 33.33%;border: 5rpx solid #FFFFFF;image {width: 100%;height: 300rpx;}}}}
</style>

在这里插入图片描述

四、实现视频声音开关以及转发

在这里插入图片描述

五、实现下载视频功能

在这里插入图片描述

<template><view class="video_play"><image :src="videoObj.img" mode=""></image><!-- 工具栏 开始--><view class="video_tool"><view @click="handleMuted" :class="['iconfont', muted ? 'icon-voice_stop':'icon-shengyin']"></view><view class="iconfont icon-zhuanfa"><button open-type="share"></button></view></view><!-- 工具栏 结束--><!-- 视频开始 --><view class="video_wrap"><video :muted="muted" :src="videoObj.video" objectFit="fill"></video></view><!-- 视频结束 --><!-- 下载开始 --><view class="download"><view class="download_btn" @click="handleDownload">下载高清视频</view></view><!-- 下载结束 --></view>
</template><script>export default {data() {return {videoObj: {},muted: false // 是否静音}},onLoad() {console.log(getApp().globalData)this.videoObj = getApp().globalData.video},methods: {// 开关声音handleMuted () {this.muted = !this.muted},// 下载视频async handleDownload () {await uni.showLoading({title: '下载中'})// 1. 将视频下载到小程序内存中const { tempFilePath } = (await uni.downloadFile({url: this.videoObj.video}))[1]// 2. 将内存中的文件 下载到本地await uni.saveVideoToPhotosAlbum({filePath: tempFilePath})uni.hideLoading()await uni.showToast({title: '下载成功'})}}}
</script><style lang="scss" scoped>.video_play {position: relative;image {position: absolute;width: 100vw;height: 100vh;z-index: -1;// css3滤镜filter: blur(10px);}.video_tool {height: 80rpx;display: flex;justify-content: flex-end;.iconfont {width: 80rpx;color: #FFFFFF;font-size: 50rpx;border-radius: 40rpx;background-color: rgba(0,0,0,.2);display: flex;align-items: center;justify-content: center;margin-right: 20rpx;}.icon-zhuanfa {position: relative;button {position: absolute;width: 100%;height: 100%;opacity: 0;}}}.video_wrap {display: flex;justify-content: center;align-items: center;video {width: 360rpx;height: 600rpx;}}.download {display: flex;justify-content: center;align-items: center;margin-top: 30rpx;.download_btn {width: 360rpx;height: 80rpx;border-radius: 40rpx;display: flex;justify-content: center;align-items: center;color: #FFFFFF;border: 3rpx solid #FFFFFF;background-color: rgba(0,0,0,.2);}}}
</style>