微信小程序?qū)崿F(xiàn)吸頂盒效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)吸頂盒效果的具體代碼,供大家參考,具體內(nèi)容如下
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}}'>設(shè)備管理</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}}'>補(bǔ)貨申請(qǐng)</text> ? ? ? ? ? ? ? ? ? ? ? ? <text class="co-btn" bindtap="toReplnishApplyList" data-g="{{item.agent_id}}" data-storename='{{item.agent_name}}'>補(bǔ)貨申請(qǐng)記錄</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, //導(dǎo)航欄初始化距頂部的距離 ?isFixedTop: false, //是否固定頂部 } /*監(jiān)聽頁(yè)面滑動(dòng)事件*/ ? ? onPageScroll: function(e) { ? ? ? ?let that = this; ? ? ? ?let scrollTop = parseInt(e.scrollTop); //滾動(dòng)條距離頂部高度 ? ? ? ?let isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false; ? ? ? ?//為了防止不停的setData, 這兒做了一個(gè)等式判斷。 只有處于吸頂?shù)呐R界值才會(huì)不相等 ? ? ?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
有查詢節(jié)點(diǎn)需求可以用延時(shí)方法或者操作事件來獲取。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)的獲取銀行卡號(hào)歸屬地及銀行卡類型操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的獲取銀行卡號(hào)歸屬地及銀行卡類型操作,結(jié)合實(shí)例形式分析了javascript不依賴第三方接口計(jì)算銀行卡歸屬地相關(guān)信息操作技巧,需要的朋友可以參考下2019-01-01JavaScript中數(shù)組嵌套對(duì)象排序方法的示例詳解
在?JavaScript?中,可以使用?sort()?方法對(duì)包含嵌套對(duì)象的數(shù)組進(jìn)行排序,本文將通過三個(gè)簡(jiǎn)單的示例為大家進(jìn)行簡(jiǎn)單的介紹,需要的可以參考下2024-03-03bootstrap-table組合表頭的實(shí)現(xiàn)方法
本篇文章主要介紹了bootstrap-table組合表頭的實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09js內(nèi)置對(duì)象處理_打印學(xué)生成績(jī)單的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨s內(nèi)置對(duì)象處理_打印學(xué)生成績(jī)單的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09JavaScript實(shí)現(xiàn)顯示和隱藏圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)顯示和隱藏圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫(kù)的圖像化顯示功能
neovis.js?由vis.js支持的圖形可視化以及來自Neo4j的數(shù)據(jù)。這篇文章主要介紹了基于d3.js/neovis.js/neod3.js實(shí)現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫(kù)的圖像化顯示功能,需要的朋友可以參考下2022-02-02js動(dòng)態(tài)添加表格數(shù)據(jù)使用insertRow和insertCell實(shí)現(xiàn)
這篇文章主要介紹了js動(dòng)態(tài)添加表格數(shù)據(jù)并使用insertRow和insertCell實(shí)現(xiàn),需要的朋友可以參考下2014-05-05如何利用Three.js實(shí)現(xiàn)web端顯示點(diǎn)云數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)web端顯示點(diǎn)云數(shù)據(jù)的相關(guān)資料,最近在項(xiàng)目中遇到需求,需要在web端顯示點(diǎn)云數(shù)據(jù),將我的實(shí)現(xiàn)步驟介紹在這里供大家參考,需要的朋友可以參考下2023-11-11Object.defineProperty()函數(shù)之屬性描述對(duì)象
這篇文章主要介紹了Object.defineProperty()函數(shù)之屬性描述對(duì)象,JavaScript?提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu),用來描述對(duì)象的屬性,控制它的行為,比如該屬性是否可寫、可遍歷等等。這個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為:屬性描述對(duì)象2022-09-09