小程序实现仿视频直播布局，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

 
  
  
     
    
      
        
          
            
            
              {{item.title}}
              {{item.desc}}
              ￥{{item.price}}
            
            
            加入购物车
          
        
      
    
  

• 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都推上去，实现不了吸顶效果）