uniapp实战仿写网易云音乐(三)—视频页面（scroll-view组件实现横线滑动，mescroll-uni实现视频列表，向下滑动刷新当前页面）
文章目录
-
- 前言
-
- 顶部导航条的实现
- 视频列表的展示部分
- CSS部分
- 最后
前言
接着上篇文章继续完成剩下的部分，本篇文章是完成第二个页面——视频页面的部分，视频还是没有做播放的效果，主要是做展示效果。下面附上两篇文章链接，没看过的同学可以回头看看：
uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现
uniapp实战仿写网易云音乐(二)—promise接口请求的封装和主页功能的实现，组件封装，配置下拉刷新
本篇文章完成的效果动态图：文章底部会附上本页面的css
顶部导航条的实现
首先我们要实现的是顶部的导航条：
如下效果，可以看到它是一个可以向右滑动的导航栏，并且选中的tab下面会有一个导航条的效果。下面来实现：
- 首先一个向右的导航栏我们就可以想到你使用scroll-view来实现：
scroll-x="true"就是可以横向滑动
<scroll-view class="scroll-view" scroll-x="true" :show-scrollbar="false">
<view class="rel">
<!-- 导航条 -->
<view class="item" v-for="(item,index) in navList" :key="index"
:class="{active: curNav==item.id}" @click="switchNav(item.id, index)">
<view class="desc">
{{item.name}}
</view>
</view>
</view>
</scroll-view>
:class绑定高亮的样式
这里点击绑定了switchNav事件，用于更改选中项的id值（用于获取数据）
- 然后来写下面红色的导航条
由上面效果图可以看出这里的红色导航条的宽度不是固定的，所以我们需要计算导航条的宽度
先在data中定义 导航条默认宽度 和 导航条偏移量
data() {
return {
navList: [], //导航条
curNav: '', //当前选中的导航条
sliderWidth: 60, //导航条默认宽度
sliderOffset:26, //导航条偏移量
}
},
然后来写一个导航条，给动态的样式：
<view class="slide"
:style="'width:'+sliderWidth+'rpx;transform:translateX('+sliderOffset+'rpx)'">
</view>
接下来就是点击导航栏的时候修改宽度和偏移量的值：
//导航条高亮切换
switchNav(itemId, index) {
this.curNav = itemId;
//导航条的宽度 140是第1项的宽度
this.sliderWidth = index===1 ? 140: 60;
//计算偏移量 左边16 文字60+间隙64=124 LOCK=80
this.sliderOffset = 124*index + (index > 1 ? 80: 16)
},
导航条完整的样式：
<scroll-view class="scroll-view" scroll-x="true" :show-scrollbar="false">
<view class="rel">
<!-- 导航条 -->
<view class="item" v-for="(item,index) in navList" :key="index"
:class="{active: curNav==item.id}" @click="switchNav(item.id, index)">
<view class="desc">
{{item.name}}
</view>
</view>
<!-- 下划线 -->
<view class="slide"
:style="'width:'+sliderWidth+'rpx;transform:translateX('+sliderOffset+'rpx)'">
</view>
</view>
</scroll-view>
视频列表的展示部分
开始实现视频列表的部分：
视频列表这里我们使用mescroll-uni组件来实现：
这里贴一下这个外部控件的官方文档：mescroll-uni
这里要实现的是一个分页，向上滚动到要能加载下一页，向下滚动要能刷新当前页，这些功能只需要配置对应的属性
先在data中定义需要用到的参数：
downOption: { //下拉刷新
auto: false
},
upOption: { //上拉加载下一页
auto: false,
page: {
num: 0, //起始页
size: 10, //一页条数
}
},
@down和@up是下拉和上拉触发的对应的函数
<mescroll-uni :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
<view class="video-list">
<view class="video-item" v-for="(item, index) in relatedVideo" :key="index">
<view class="video-wrap">
<image :src="item.coverUrl" mode="" class="img"></image>
<view class="desc ellipsis">
{{item.title}}
</view>
<view class="creater-bar flex-box">
<view class="name">
{{item.creator[0].userName}}
</view>
</view>
</view>
</view>
</view>
</mescroll-uni>
然后在函数中进行对应的操作：
//下拉刷新回调
downCallback(mescroll) {
console.log("downcallback")
//重置列表为第一页(自动执行page.num=1，再触发upcallback方法)
mescroll.resetUpScroll();
},
//上拉加载回调
upCallback(mescroll) {
console.log("upcallback", mescroll)
//加载下一页数据
this.getList(mescroll.num, mescroll.size, res=> {
//若是第一页 则清空
if (mescroll.num == 1) {
this.relatedVideo = [];
}
//累加数据
this.relatedVideo = this.relatedVideo.concat(res);
//成功的回调，隐藏刷新状态
mescroll.endSuccess();
}, ()=>{
//失败的回调，隐藏下拉刷新状态
mescroll.endErr();
})
}
CSS部分
最后
ok到这里就实现了第二个页面的内容，后面会继续更新剩下的页面，感兴趣的可以点一个订阅关注呀~~