一、分段器組件的使用

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>

總結

以上是生活随笔為你收集整理的二、uniapp项目（分段器的使用、scroll-view、视频下载、转发）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。