uniapp五分鐘實現刷抖音小程式教學範例

2023-03-17 06:01:39

前言

最近閒來無事，在自己的小程式裡面整合了一個小視訊的介面，但是由於小程式對於播放視訊的限制，只能用來做一個demo刷視訊了，沒辦法上線體驗。

小程式播放視訊限制最多10個，超出可能就崩了。

我也有想過用js去追加和刪減，但是還是有點麻煩了，等有空了再把想法化為現實吧。

演示一下看看

去掉小程式頂部欄

為了讓小視訊刷起來更有感覺，肯定是需要弄個全螢幕才行的。
在 uniapp 專案裡面的 pages.json 檔案中修改當前頁面路徑的 navigationStyle

{
    "path": "pages/searchvideo/searchvideo",
    "style": {
        "navigationBarTitleText": "小視訊",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
    }
}

頂部欄可以根據自己的需求自定義，我這裡放了一個類似於抖音的 tab欄。

捲動小視訊

在uniapp和原生的微信小程式裡面都有 swiper 標籤用於做捲動或輪播效果的元件，所以我們可以直接利用這個元件做出我們想要的效果。

元件

<swiper class="card-swiper" :circular="true" vertical="true" :autoplay="true" duration="500"
        interval="5000" @change="cardSwiper">
    <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
            <video :id="`video-${item.id}`" :src="item.mp4" loop style="height: 100vh;width: 100vw;"></video>
        </view>
    </swiper-item>
</swiper>

通過設定 autoplay 元素，可以讓頁面開啟時，不會自動播放視訊。
如果需要設定自動播放視訊，需要動態設定 duration 的值，需要等於當前視訊的播放時長。
迴圈 swiperList 的資料，方便我們操作當前視訊。

資料

cardCur: 0,
swiperList: [{
    id: 0,
    mp4: 'http://vcdnb.huoying666.com/new_video/2022/0725/b94a235358c31668dc99e7cff9fe5e9c/v1080/b94a235351_6921661_fhd.mp4'
}, {
    id: 1,
    mp4: 'http://vcdnb.huoying666.com/new_video/2020/1211/9d0b01c88bd05721f9de88122de72db1/v1080/9d0b01c881_5872976_fhd.mp4'
}, {
    id: 2,
    mp4: 'http://vcdnb.huoying666.com/new_video/2021/1109/6f5610c304083ca59141c8f70aca6396/v720/6f5610c301_6578243_hd.mp4'
}]

在 data 中定義 swiperList 資料內容，當然你也可以做成介面形式動態新增進去。
同時設定 cardCur 的預設值，用於設定視訊捲動下標。

樣式

.card-swiper {
        height: 100vh !important;
}

.card-swiper swiper-item {
        width: 750rpx !important;
        left: 0rpx;
        box-sizing: border-box;
        overflow: initial;
}

.card-swiper swiper-item .swiper-item {
        width: 100%;
        display: block;
        height: 100vh;
        border-radius: 0rpx;
        transform: scale(1);
        transition: all 0.2s ease-in 0s;
        overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
        transform: none;
        transition: all 0.2s ease-in 0s;
}

.card-swiper swiper-item .swiper-item-png {
        margin-top: -50vh;
        width: 100%;
        display: block;
        border-radius: 0rpx;
        transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
        transition: all 0.6s ease 0s;
}

.card-swiper swiper-item.cur .swiper-item-png {
        margin-top: -100vh;
        width: 900rpx;
        transform: translate(-80rpx, 0rpx) scale(1, 1);
        transition: all 0.6s ease 0s;
}

.image-banner {
        display: flex;
        align-items: center;
        justify-content: center;
}

.image-banner image {
        width: 100%;
}

事件

cardSwiper(e) {
    this.cardCur = e.detail.current
    for (let i = 0; i < this.swiperList.length; i++) {
        const videoContext = uni.createVideoContext(`video-${this.swiperList[i]['id']}`, this)
        if (i === this.cardCur) {
            videoContext.play()
        } else {
            videoContext.stop()
        }
    }
}

在 methods 中定義 swiper 改變時的方法，用於控制視訊的暫停和播放。

由於uniapp是可以直接編譯成 H5 的，所以我們就直接在掘金程式碼片段中看一下效果吧。

程式碼片段

程式碼片段裡面的內容是直接參照的uniapp雲釋出的連結，如果想了解這一塊的內容，可以單獨開篇文章寫一下的。

<div id="app">
  <iframe src="https://static-54d8ac48-ba3d-4f0d-8a0b-029cbc34a4b3.bspapp.com/#/" width="400" height="800"></iframe>
</div>

{"success":false,"error":{"code":"InvalidSpace.Deleted","message":"The space is already deleted."},"data":null}

寫完了就得總結一下

這個功能對於小程式來說做起來不算太複雜，也是由於微信的限制，不能做出太複雜的刷視訊的功能。大家可以根據自己的需求去修改這一塊的程式碼

以上就是uniapp五分鐘實現刷抖音小程式教學範例的詳細內容，更多關於uniapp刷抖音小程式的資料請關注it145.com其它相關文章！