基于uniapp模仿抖音视频案例

基于uniapp swiper 模仿抖音下拉加载上拉刷新

一、html代码

<!-- 视频上滑示例 -->
        <view class="view_back">
            <!-- banner内容 -->
            <view class="view_cont">
                <!-- 轮播 -->
                <swiper class="swiper" :duration='300' :vertical='true' @animationfinish="viewChange" @transition='swiper_trans'>
                    <swiper-item  v-for="(item,index) in viewList" :key='index'>
                        <view class='swiper_box' :style="{background:item.back}">
                            {{item.name}}
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <view class="view_Refresh" :style="{top:Math.abs(viewDy)+10+'px'}" v-show="viewNum==0&&viewDy<0">
                刷新
            </view>
        </view>

二、script代码

            // 监听移动
            swiper_trans(e) {
                this.viewDy = Math.ceil(e.detail.dy)
                if (this.changeFlag&&this.viewNum == 0 && e.detail.dy < -150) {
                    this.changeFlag=false;
                    this.page = 0
                    this.getViewData(this.page)
                }
            },
            // 视频切换
            viewChange(e) {
                    this.changeFlag=true;
                this.viewNum = e.detail.current
                if (this.viewNum + 1 == this.viewList.length) {
                    this.getViewData(++this.page)
                }

            },
            //获取视频数据
            getViewData(page) {
                if (page == 0) {
                    this.viewList = []
                }
                for (let key = 1; key < 11; key++) {
                    let viewobj = {};
                    viewobj.id = 10 * page + key
                    viewobj.name = `这是视频${10*page+key}`
                    viewobj.back = this.generateColor()
                    this.viewList.push(viewobj)
                }
            },
            // 生成不同的颜色
            generateColor() {
                return 'rgb(' + this.random(0, 255) + ',' + this.random(0, 255) + ',' + this.random(0, 255) + ')'
            },
            // 生成随机数
            random(min, max) {
                return Math.ceil(Math.random() * (max - min) + min)
            }

三、scss代码

.view_back {
            width: 100%;
            height: 1200rpx;
            overflow-y: scroll;
            background: #2b2a2a;
            position: relative;

            .view_cont {
                width: 100%;
                height: auto;
                overflow: hidden;

                .swiper {
                    width: 100%;
                    height: 1200rpx;

                    .swiper_box {
                        width: 100%;
                        height: 100%;
                        font-size: 60rpx;
                        text-align: center;
                        line-height: 1200rpx;
                    }
                }
            }

            .view_Refresh {
                width: 100rpx;
                height: 100rpx;
                position: absolute;
                background: #fff;
                border-radius: 50%;
                font-size: 26rpx;
                text-align: center;
                line-height: 100rpx;
                color: #2b2a2a;
                top: 0;
                left: 300rpx;
            }
        }

四、案例演示