仿bilibili微信小程序2

五，轮播图
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();
    },