微信小程序实现吸顶盒效果
作者:m0_57568275 时间:2024-04-28 09:33:38
本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码,供大家参考,具体内容如下
html部分
<!-- 列表 -->
<view class="partner-content-container mt15">
<!-- 吸顶盒 -->
<view class="partner-list-header {{isFixedTop?'tab-fixed':''}}" id='operation-bar'>
<view class="partner-list-title">合伙人</view>
<view class="partner-list-title icon-container" style="width:60%!important">
<text>操作</text>
<image src="../../../../static/imges/right_arrow.png" class="right-arrow" mode="widthFix"></image>
</view>
</view>
<!-- 用于吸顶后 占位用的 -->
<view class="partner-list-header" wx:if="{{isFixedTop}}"></view>
<!-- 列表 -->
<view class="partner-list-content" wx:for='{{memLs}}' wx:key='index'>
<view class="item-desc">{{item.agent_name}}</view>
<view class="co-wrapper">
<view>
<scroll-view scroll-x="true" style=" white-space: nowrap; " >
<text class="co-btn" bindtap="toMember" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>成员管理</text>
<text class="co-btn" bindtap="toMachineList" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>设备管理</text>
<text class="co-btn" bindtap="toPoint" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>门店管理</text>
</scroll-view>
</view>
<view>
<scroll-view scroll-x="true" style=" white-space: nowrap; " >
<text class="co-btn" bindtap="toReplnishApply" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>补货申请</text>
<text class="co-btn" bindtap="toReplnishApplyList" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>补货申请记录</text>
</scroll-view>
</view>
</view>
</view>
</view>
css部分
.partner-content-container{
width: 100%;
background: #fff;
}
.partner-list-header{
display: flex;
justify-content: space-around;
height: 80rpx;
line-height: 80rpx;
border-bottom: 3rpx dashed #b2b3b2;
margin: 0 20rpx;
font-weight:bold;
background: #fff;
width: 100%;
}
.tab-fixed{
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.partner-list-title{
width: 40%;
text-align: center;
}
.icon-container{
display: flex;
justify-content:center;
align-items: center;
}
.right-arrow{
width: 50rpx;
margin-right: 20rpx;
}
.partner-list-content{
display: flex;
justify-content: space-around;
align-items: center;
background: #fff;
line-height: 100rpx;
margin: 0 20rpx;
}
.co-wrapper{
width: 55%;
box-sizing: border-box;
}
.item-desc{
width:45%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.co-btn{
background: rgb(14 37 199);
font-size: 24rpx;
margin-top: 10rpx;
border-radius: 10rpx;
color: #fff;
padding: 18rpx 22rpx;
margin:0 10rpx 0 0;
}
js部分
data:{
navbarInitTop: 0, //导航栏初始化距顶部的距离
isFixedTop: false, //是否固定顶部
}
/*监听页面滑动事件*/
onPageScroll: function(e) {
let that = this;
let scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
let isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
if (that.data.isFixedTop === isSatisfy) {
return false;
}
that.setData({
isFixedTop:isSatisfy
})
},
onShow: function () {
let that = this;
wx.createSelectorQuery().select('#operation-bar').boundingClientRect(function(rect) {
if (rect && rect.top > 0) {
var navbarInitTop = parseInt(rect.top);
that.setData({
navbarInitTop: navbarInitTop
});
console.log(that.data.navbarInitTop)
}
}).exec();
},
wx.createSelectorQuery().select('#operation-bar').boundingClientRect(function(rect)}rect值可能为null
有查询节点需求可以用延时方法或者操作事件来获取。
来源:https://blog.csdn.net/m0_57568275/article/details/122041166
标签:微信小程序,吸顶盒
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python 对象中的数据类型
2022-01-25 00:58:35
Mysql的MERGE存储引擎详解
2024-01-25 22:26:49
CSS系统默认颜色
2009-01-04 16:53:00
asp如何制作一个倒计时的程序?
2010-06-29 21:25:00
python定义变量类型
2022-01-28 02:13:52
![](https://img.aspxhome.com/file/2023/2/124982_0s.png)
Python的线程之线程同步
2021-02-05 23:23:32
![](https://img.aspxhome.com/file/2023/5/135145_0s.jpg)
通过源码分析Golang cron的实现原理
2023-06-15 23:49:24
MySQL查询不含周末的五天前的日期
2008-11-11 12:28:00
MySQL范围查询优化的场景实例详解
2024-01-17 01:11:12
python过滤中英文标点符号的实例代码
2022-11-09 13:43:09
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2022-06-24 09:32:21
![](https://img.aspxhome.com/file/2023/9/100279_0s.jpg)
Django rest framework工具包简单用法示例
2022-05-17 12:00:21
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2023-11-14 16:13:53
Oracle捕获问题SQL解决CPU过渡消耗
2010-07-21 13:14:00
百度UEditor编辑器使用教程与使用方法(图文)
2023-03-31 14:07:53
![](https://img.aspxhome.com/file/2023/9/70629_0s.png)
python时间日期操作方法实例小结
2021-03-13 11:01:45
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2023-06-12 06:25:48
python Tkinter的图片刷新实例
2023-10-31 04:32:24
Centos MySQL 5.7安装、升级教程
2024-01-19 10:24:03
![](https://img.aspxhome.com/file/2023/8/69178_0s.jpg)
列出SQL Server中具有默认值的所有字段的语句
2024-01-16 20:17:27
![](https://img.aspxhome.com/file/2023/1/91151_0s.jpg)