微信小程序商品界面实现，顶部固定，解决顶部内容重叠问题，动态加载顶部标签栏

使用顶部固定时，滑动下面内容会与固定部分重叠

.top-fixed {
  position: fixed;
  top: 0;
  width: 750rpx;  
  background: #FFFFFF;
 }

只需要给顶部标签栏加上z-index属性,滑动时就会覆盖

.top-fixed {
  position: fixed;
  top: 0;
  width: 750rpx;  
  background: #FFFFFF;
  z-index:999;
}
// 防止初始化遮挡
.waterflowstyle {
  padding-top: 180rpx;
}

wxml代码如下：

<!--pages/goods_list/index.wxml-->
<view class="top-fixed">
  <van-tabs id="tabs" active="{{ active }}" bind:click="onClickGoodsType">
    <view wx:for="{{goodsType}}" wx:key="item">
      <van-tab title="{{item.goodsTypeName}}" />
    </view>
  </van-tabs>
  <van-dropdown-menu>
    <van-dropdown-item value="{{ orderBy }}" options="{{ orders }}" />
    <van-dropdown-item id="item" title="筛选">
      <van-cell title="无货商品">
        <van-switch
          slot="right-icon"
          size="24px"
          style="height: 26px"
          checked="{{ isOutOfStock }}"
          active-color="#07c160"
          bind:change="onOutOfSockChange"
        />
      </van-cell>
      <van-cell title="预约商品">
        <van-switch
          slot="right-icon"
          size="24px"
          style="height: 26px"
          checked="{{ isReserve }}"
          active-color="#07c160"
          bind:change="onReserveChange"
        />
      </van-cell>
      <view style="padding: 5px 16px;">
        <van-button type="primary" block round bind:click="onConfirm">
          确认
        </van-button>
      </view>
    </van-dropdown-item>
  </van-dropdown-menu>
</view>
<view class="waterflowstyle">
  <l-water-flow generic:l-water-flow-item="GoodsItem" bind:linitemtap="onClickGoods"/>
  <l-loadmore show="{{isLoading}}" type="loading" loading-text="努力加载中~" />
  <l-loadmore show="{{!isHaveMoreData}}" line="true" type="end" end-text="没有更多数据了" />
</view>

相关依赖

{
  "usingComponents": {
    "GoodsItem":"/components/goods-item/goods-item",
    "l-water-flow":"/miniprogram_npm/lin-ui/water-flow/index",
    "van-tabs":"/miniprogram_npm/vant-weapp/tabs/index",
    "van-tab":"/miniprogram_npm/vant-weapp/tab/index",
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore",
    "van-dropdown-menu": "/miniprogram_npm/vant-weapp/dropdown-menu/index",
    "van-dropdown-item": "/miniprogram_npm/vant-weapp/dropdown-item/index",
    "van-switch": "/miniprogram_npm/vant-weapp/switch",
    "van-cell": "/miniprogram_npm/vant-weapp/cell",
    "van-button": "/miniprogram_npm/vant-weapp/button"
  }
}

相关方法

import { request } from "../../request/index"
import { initGoods,getGoodsByType } from "../../utils/url"
// pages/goods_list/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    orders:[
      { text: '默认排序', value: 0 },
      { text: '销量排序', value: 1 },
      { text: '价格升序', value: 2 },
      { text: '价格降序', value: 3 }
    ],
    goods:[],
    goodsType:[],
    active: 0,
    pageIndex:1,
    goodsTypeId: 0,
    isHaveMoreData: true,
    isLoading: true,
    orderBy: 0,
    isReserve: true,
    isOutOfStock: true
  },

  onConfirm() {
    console.log(this.data.isOutOfStock)
    console.log(this.data.isReserve)
    this.selectComponent('#item').toggle();
  },

  onOutOfSockChange({ detail }) {
    this.setData({ isOutOfStock: detail });
  },

  onReserveChange({ detail }) {
    this.setData({ isReserve: detail });
  },

  /**
   * 
   * @param {商品类型位置下标} data
   */
  onClickGoodsType: function(data) {
    this.data.goodsTypeId = this.data.goodsType[data.detail.index].id
    this.data.pageIndex = 0
    this.setData({
      isHaveMoreData: true,
      isLoading: true
    })
    console.log()
    this.data.goods = []
    this.loadMoreData(true)
  },

  /**
   * 
   * @param {商品信息} data 
   */
  onClickGoods: function(data) {
    console.log(data.detail.item.id)
  },

  /**
   * 加载数据
   * 
   * @param {*} isReload 如果是重新加载，则取消之前的内容重新加载数据
   */
  loadMoreData: function(isReload) {
    if(!this.data.isHaveMoreData) 
      return
    let obj = {
      method: "POST",
      data: { 
        storeId: 1,
        pageIndex: this.data.pageIndex,
        goodsTypeId: this.data.goodsTypeId
      },
      url: getGoodsByType,
    }
    request(obj).then(data => {
      this.data.pageIndex = this.data.pageIndex + 1
      this.setData({
        isLoading: false
      })
      if(data.data.length < 10) {
        this.setData({
          isHaveMoreData: false
        })
      }
      // 当没有新数据的时候，再调用重新渲染，会导致界面内容为空，之前的内容被删除，如果是追加的方式就直接退出
      if(data.data.length == 0 && !isReload){
        return
      }
      this.data.goods = this.data.goods.concat(data.data)
      // 第一个参数是数据，会保存之前的数据，所以这里只需要加入增量数据，有个bug是增量数据为空时，会删除所有数据
      // 是否重新渲染，重新渲染会从头开始重新渲染，不是的话就会加载增量数据，从之前的底部开始渲染
      // 渲染回调
      wx.lin.renderWaterFlow(data.data, isReload ,()=>{
        console.log('渲染成功')
      })
    }).catch(err => {
      console.log(err)
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let obj = {
      method: "POST",
      data: { storeId: "1"},
      url: initGoods,
    }
    request(obj).then(data => {
      this.data.goods = data.goods
      if(data.goods.length < 10) {
        this.setData({
          isHaveMoreData: false,
          isLoading: false
        })
      }
      // 使用setData会重新渲染界面，更新商品类型
      this.setData({
        goodsType: data.goodsType
      })
      this.data.goodsTypeId = data.goodsType[0].id
      wx.lin.renderWaterFlow(this.data.goods, false ,()=>{
        console.log('渲染成功')
      })
    }).catch(err => {
      console.log(err)
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.loadMoreData(false)
  }
})

组件用的lin-ui,官网点此和vant-weapp，官网点此