«

uniapp如何实现刷抖音小程序

时间:2024-7-31 08:55     作者:韩俊     分类: Javascript


本篇内容介绍了“uniapp如何实现刷抖音小程序”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

去掉小程序顶部栏

    为了让小视频刷起来更有感觉,肯定是需要弄个全屏才行的。

    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 ></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云发布的链接,如果想了解这一块的内容,可以单独开篇文章写一下的。

<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}

标签: javascript

热门推荐