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

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

.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-switchslot="right-icon"size="24px"style="height: 26px"checked="{{ isOutOfStock }}"active-color="#07c160"bind:change="onOutOfSockChange"/></van-cell><van-cell title="预约商品"><van-switchslot="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>

相关方法

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].idthis.data.pageIndex = 0this.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) returnlet 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 + 1this.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.goodsif(data.goods.length < 10) {this.setData({isHaveMoreData: false,isLoading: false})}// 使用setData会重新渲染界面，更新商品类型this.setData({goodsType: data.goodsType})this.data.goodsTypeId = data.goodsType[0].idwx.lin.renderWaterFlow(this.data.goods, false ,()=>{console.log('渲染成功')})}).catch(err => {console.log(err)})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {this.loadMoreData(false)}
})

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

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

微信小程序 fire_如何在Fire TV和Fire TV Stick上侧面加载应用程序
微信小程序 fire Amazon's Fire TV and Fire TV stick technically runs Android-but you wouldn't know it from ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
解决微信小程序 app onLaunch异步请求，在没有请求执行完就加载首页了的问题
今天在调试小程序的过程中,进了一个坑,程序加载需要先获取用户信息,然后保存到Storage中,然后首页去 Storage取信息,根据用户信息去查本地服务器数据列表,可是发现第一次进入的时候,数据总是加 ...
视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
微信小程序商品分享海报
canva实现微信小程序商品分享海报前言使用canvas画布实现小程序分享海报功能一.定义一个生成海报按钮 1.点击按钮生成海报 catchtap:handleShare 使用catch绑定阻止 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序初始界面设置密码
如何在微信小程序初始界面输入密码,看到网上给出了很多方法,较为常见的是如何输入一个六位密码.这里介绍一种觉得比较可行的方法,具体实现如下: 最终效果: 代码实现: wxml: <input cl ...
php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将 ...
微信小程序之界面交互API07
微信小程序之界面交互API07 关于界面交互,在官方文档上提供了API来 wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)! 显示消息提示框参数 Obj ...

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

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

最新文章

热门文章