微信小程序实现吸顶盒效果
作者: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
0
投稿
猜你喜欢
- 除了B-Tree 索引,MySQL还提供了如下索引:Hash索引只有Memory引擎支持,场景简单R-Tree索引MyISAM的一个特殊索引
- $forceUpdate()的使用在Vue官方文档中指出,$forceUpdate具有强制刷新的作用。那在vue框架中,如果data中有一个
- SQL Server 2008 master数据库损坏后,SQL SERVER服务启动失败,查看错误日志,你会看到下面错误信息:2015-1
- 一、go语言内存布局想象一下,你有一个如下的结构体。type MyData struct {
- 本文为官方文档译文,官方文档现已非机器翻译 https://docs.microsoft.com/zh-cn/aspnet/core/fun
- 本文实例讲述了python实现的登录与提交表单数据功能。分享给大家供大家参考,具体如下:# !/usr/bin/env python# -*
- 1、改表法。可能是你的帐号不允许从远程登陆,只能在localhost。这个时候只要在localhost的那台电脑,登入mysql后,更改&n
- Fabric是一个用Python开发的部署工具,最大特点是不用登录远程服务器,在本地运行远程命令,几行Python脚本就可以轻松部署。文档入
- 本文实例讲述了Python 实现的微信爬虫。分享给大家供大家参考,具体如下:单线程版:import urllib.requestimport
- 在使用reflect包获取函数,并调用时,总出现这个报错:panic: reflect: call of reflect.Value.Cal
- 本文实例讲述了Python模块的定义,模块的导入,__name__用法。分享给大家供大家参考,具体如下:相关内容:什么是模块模块的导入同级目
- 总是记不住API。昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧:python中对文件、文件夹(文件操作函数)的操作需要涉及到os
- 继Go 1.18支持泛型后,Go 将在下个版本中支持pdqsort排序算法再次引起了开发者们的热切讨论。目前,Go仓库的最新commit中提
- 前言这是我在搭建Django项目时候的过程,拿来总结记录,以备不时之需。项目采用nginx+uwsgi的搭配方式。项目依赖包采用 requi
- 在使用selenium去获取淘宝商品信息时会遇到登录界面这个登录界面处理的难度在于滑动验证的实现,有的人使用微博登录,避免了滑动验证,那可不
- 本文实例讲述了python用来获得图片exif信息的库用法。分享给大家供大家参考。具体分析如下:exif-py是一个纯python实现的获取
- 升级到第二版,开一贴以示庆贺,哈哈哈 自 Ver1.1 升级内容 1. 增加函数列表 2. 增加函数
- 通常情况下:from threading import Threadglobal_num = 0def func1(): global gl
- 首先,你要知道pycharm可以通过ssh链接到远程服务器,并且也能够用pycharm运行远程服务器的代码。可以参考https://www.
- 使用MySQL8,在整合ssm框架,用mybatis逆向工程生成的代码测试时,执行到数据库查询前均正常,但进行查询时,便卡主没有反应了,设置