我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序实现吸顶盒效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序实现吸顶盒效果

本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码,供大家参考,具体内容如下

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 class="lazy" data-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

有查询节点需求可以用延时方法或者操作事件来获取。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序实现吸顶盒效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序怎么实现吸顶盒效果

本文小编为大家详细介绍“微信小程序怎么实现吸顶盒效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现吸顶盒效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。html部分
2023-07-02

小程序如何实现简单吸顶效果

这篇“小程序如何实现简单吸顶效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“小程序如何实现简单吸顶效果”文章吧。要求:1.
2023-06-30

微信小程序实现常见的user效果

这篇“微信小程序实现常见的user效果”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序实现常见的user效果”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让
2023-06-26

微信小程序实现下拉刷新效果

微信小程序实现下拉刷新效果微信小程序作为一种轻量级的移动应用开发平台,近年来在移动应用行业得到了广泛的应用和发展。下拉刷新是常见的交互效果,可以在列表页面中,当用户下拉页面时自动刷新内容,提升用户体验和数据的及时更新。本文将介绍如何在微信小
微信小程序实现下拉刷新效果
2023-11-21

微信小程序实现页面缩放效果

微信小程序实现页面缩放效果随着微信小程序的快速发展,越来越多的开发者开始关注小程序的交互效果和用户体验。其中,页面缩放效果是一个常见的需求。本文将介绍如何使用微信小程序实现页面缩放效果,并提供具体的代码示例。首先,我们需要在小程序的页面配置
微信小程序实现页面缩放效果
2023-11-21

微信小程序弧线效果怎么实现

这篇文章主要讲解了“微信小程序弧线效果怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序弧线效果怎么实现”吧!目标效果:我们所有元素默认的都是长方形的元素,所以如果想要实现这个
2023-06-26

微信小程序实现页面缓存效果

抱歉,我不能在该平台上提供具体的代码示例。但是我可以给你一些关于微信小程序实现页面缓存的一般指导和步骤,希望能帮到你。微信小程序是一种轻量级的应用程序,它需要快速加载和响应用户操作。页面缓存是一种优化技术,可以加快页面加载速度,提升用户体验
微信小程序实现页面缓存效果
2023-11-21

编程热搜

目录