小程序实现仿视频直播布局，tab吸顶功能

这是一个朋友找帮忙实现一个微信小程序的tab吸顶功能，希望在tab在滑动列表的时候始终是处于视频下面，到底后tab可以吸顶，用Vant Weapp中的tab实现吸顶功能

效果走一波

准备工作Vant Weapp配置

Tab 标签页官方文档

git clone https://github.com/youzan/vant-weapp.git

直接将代码clone到本地，然后找到lib目录，将相关导入到自己的项目lib.注意：由于vant-weapp lib中控件过多，可以自己选择部分需要的导入，如下图：

然后在app.json如下配置：

"usingComponents": {
    "van-tab": "pages/common/lib/tab/index",
    "van-tabs": "pages/common/lib/tabs/index"
  }

接下来直接上代码了

• index.wxml

 <video style='width: 100%' src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls></video>
  <view class='container'>
  <van-tabs sticky class='tab'>
    <van-tab wx:for="1234" wx:key="index" title="{{ '标签' + item }}"> </van-tab>
    <view class='container'>
      <scroll-view scroll-y='true' class='scroll-view-sty'>
        <block wx:for="{{listInfos}}" wx:for-item="item">
          <view class='list-item' bindtap='navDetails' data-bean='{{item}}' animation='{{animationData}}'>
            <image src='{{item.url}}' class='list-item-img'></image>
            <view style='flex-direction:row'>
              <view class='list-item-title'>{{item.title}}</view>
              <view class='list-item-desc'>{{item.desc}}</view>
              <view class='list-item-price'>￥{{item.price}}</view>
            </view>
            <!-- catchtap可以防止点击按钮时触发item的点击事件 -->
            <button class='list-item-add-cart-btn' type='primary' size='mini' catchtap='addShoppingCart' data-bean='{{item}}' animation='{{btnZoom}}'>加入购物车</button>
          </view>
        </block>
      </scroll-view>
    </view>
  </van-tabs>
</view>

• index.js

// pages/product.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listInfos: [],
    animationData: {},
    btnZoom: {},
    height:400
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var imgs = [
      'https://ps.ssl.qhimg.com/sdmt/178_135_100/t019312dbe9771c7699.jpg',
      'https://ps.ssl.qhimg.com/sdmt/211_132_100/t01980bce63734a280f.webp',
      'https://p.ssl.qhimg.com/t012b1d88939e5ffedd.gif'
    ];
    var listInfos = new Array();
    for (var i = 1; i < 30; i++) {
      listInfos.push({
        title: "课程标题一" + i,
        desc: '课程详情一' + i,
        price: 9999.00 + i,
        url: imgs[i % 3]
      });
      this.setData({
        listInfos: listInfos
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    var animation = wx.createAnimation({
      timingFunction: "ease-in-out",
    })

    this.animation = animation
    this.animation.scale(1.2, 1.2).rotateX(-360).step({
      duration: 1500
    });
    this.animation.scale(1, 1).step({
      duration: 1000
    });

    this.setData({
      animationData: animation.export()
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },
  /**
   * 添加商品
   */
  addShoppingCart: function(e) {
    //获取当前item数据所在的集合
    var itemInfo = e.currentTarget.dataset;
    //获取当前item的bean对象
    var bean = itemInfo.bean;

    var animation = wx.createAnimation({
      timingFunction: "ease-in-out",
    })

    this.animation = animation
    this.animation.scale(1.2, 1.2).step({
      duration: 1500
    });
    this.animation.scale(1, 1).step({
      duration: 1000
    });

    this.setData({
      btnZoom: animation.export()
    }, wx.showToast({
      title: bean.title + '加入购物车成功'
    }))
  },
  
})

• index.wxss

/* prproduct.wxss */
.list-item{
    display: flex;
    background: #fff;
    margin: 8px;
    border-radius: 6px;
}
.list-item-title{
  color: #000;
  font-size: 0.9em;
  margin-top: 8px;
}
.list-item-desc{
  color: #9c9c9c;
  margin-top: 8px;
  font-size: 0.8em;
}
.list-item-price{
  color: red;
  margin-top: 8px;
  font-size: 0.9em;
}
.list-item-img{
  width: 80px;
  height: 80px;
  margin: 8px;
}
.list-item-add-cart-btn{
  height: 30px;
  margin-top: 58px;
}
.tab{
width: 100%;
 height: 30px;
 background: #fff;
}
.scroll-view-sty{
 height: 600px;
}

填坑总结

1. scroll-view写在van-tabs里面；van-tabs中在van-tab上方写的view会显示在tab下面
2. scroll-view要设置固定高度（重点：如果不设置默认100%滚动的时候可以把上面所有的view都推上去，实现不了吸顶效果）