小程序视频页，视频分类导航

同样三部分，1，界面（结构）

<view class="info">

<view class="header">
  <scroll-view 
    scroll-x
    enable-flex
    class="nav_menu"
  >
  <view class="item" wx:for="{
   
   {videoGroupList}}" wx:key="{
   
   {item.id}}"
    bindtap="handlePlay"
 
  >
    <view class="container"
     id = "{
   
   {item.id}}"
       class="{
   
   {vid===item.id?'active':''}}"
     >
      {
   
   {item.name}}
    </view>
  </view>
  
   
  </scroll-view>
</view>
    <!-- <view class="logo">
      <image src = "/static/images/nvsheng.jpg"></image>
    
      <view class="show">
        <text>1 /</text>
        <text> 2</text>
      </view>
    </view> -->

    <!-- <view class="movediv"
    bindtouchstart="movetouchstart"
    bindtouchmove="movetouchmove"
    bindtouchend="movetouchend"

    style="transform :{
   
   {movestyle}}; transition:{
   
   {movetime}}"
    >
    </view>

    <view class="personal">
      <image src="{
   
   {avatar}}"  bindtap="login"></image>

      <text>{
   
   {desc}}</text>
    </view> -->
</view>

2，样式：


.nav_menu {
  display: flex;
  flex-direction: row;
  width:100%;
  /* background:#CCC; */
  white-space: nowrap;
  height: 62rpx;
}

 .nav_menu .item{
   height:60rpx;
   line-height: 60rpx;
   padding: 0rpx 10rpx;
   box-sizing: border-box;
 }

 .active {
   border-bottom: 2rpx solid #f00;
 }

3 行为：（行为，状态的维护）

// pages/info/info.


Page({

  /**
   * 页面的初始数据
   */
  data: {
videoGroupList':[],
    'vid':0
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
	


// 获取视频的分类列表
  wx.request({
    url: 'http://localhost:3000/video/group/list',
    success:(res)=>{
      console.log(res)
      let videoGroupLit = res.data.data; 
      videoGroupLit.splice(0,99);
      let videoId = videoGroupLit[0].id;
      this.setData({
        videoGroupList: videoGroupLit,
        vid: videoId
      })
    }
  })


  }


 

})

重点就是css

可以实现这个效果：

基本套路，还是从后台获取数据，然后放过data 里面，通过微信数据绑定机制，动态的更新数据

要是有特定的状态，也可以在data里面生命状态，只要状态变了，视图会跟着发生变化

我们最重要的就是维护状态的管理！

小程序视频 页，视频分类导航

猜你喜欢

小程序视频页，视频分类导航