五,轮播图
wxml
<view class="slides">
<swiper autoplay indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
<navigator>
<!--Widthfix 宽度不变,高度自动变化,保持原图宽高比不变。-->
<image mode="widthFix" src="{{item.imgSrc}}" />
</navigator>
</swiper-item>
</swiper>
</view>
wxss修饰
.slides{
margin-top: 10rpx;
}
.slides swiper{
height:220rpx;
}
.slides navigator{
width: 100%;
height: 100%;
}
index.js中关于轮播图的代码
Page({
/**
* 页面的初始数据
*/
data: {
swiperList:[],
},
getSwiperList(){
let that=this;
wx.request({
url:'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
data:{},
method:"GET",
success:function(res){
// console.log(res)
if(res.data.code===0){
that.setData({
swiperList:res.data.data.swiperList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getSwiperList();
},
六, 首页视频信息列表
index.wxml中
<view class="videowrap">
<navigator url="../detail/detail?id={{item.id}}" class="videoitem" wx:for="{{videoList}}" wx:key="{{index}}">
<!-- 图片容器 -->
<view class="videoimg">
<!-- 图片 -->
<image src="{{item.imgSrc}}" mode="widthFix"></image>
<!-- 播放量。。。 -->
<view class="videoinfo">
<!-- 播放量 -->
<view class="playcountwrap">
<!-- 图标 -->
<text class="fa faplaycircleo"></text>
<!-- 数值 -->
<text class="playcount">{{item.playCount}}</text>
</view>
<!-- 评论量 -->
<view class="commentcountrow">
<!-- 图标 -->
<text class="fa facommento"></text>
<!-- 数值 -->
<text class="commentcount">{{item.commentCount}}</text>
</view>
</view>
</view>
<!-- 标题 -->
<view class="videotitle">{{item.desc}}</view>
</navigator>
</view>
index.wxss
.videowrap{
display:flex;
flex-wrap: wrap;
padding: 5rpx;
justify-content: space-between;
}
.videoitem{
width:48%;
margin-bottom: 20rpx;
}
.videoimg{
position: relative;
}
.videoimg image{
width: 100%;
border-radius: 15rpx;
}
.videoimg .videoinfo{
position: absolute;
bottom: 10rpx;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
color: #fff;
font-size: 24rpx;
}
.videotitle{
font-size: 28rpx;
display: -webkit-box;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
js代码
//index.js
//获取应用实例
Page({
/**
* 页面的初始数据
*/
data: {
videoList:[]
},
getVideoList(){
let that=this;
wx.request({
url:'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videosList',
data:{},
method:"GET",
success:function(res){
//console.log(res)
if(res.data.code===0){
that.setData({
videoList:res.data.data.videosList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getVideoList();
},