最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序?qū)崿F(xiàn)吸頂盒效果

 更新時間:2022年06月30日 16:54:12   作者:m0_57568275  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)吸頂盒效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?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}}'>補貨申請</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, //導(dǎo)航欄初始化距頂部的距離
 ?isFixedTop: false, //是否固定頂部
}
/*監(jiān)聽頁面滑動事件*/
? ? onPageScroll: function(e) {
? ? ? ?let that = this;
? ? ? ?let scrollTop = parseInt(e.scrollTop); //滾動條距離頂部高度
? ? ? ?let isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
? ? ? ?//為了防止不停的setData, 這兒做了一個等式判斷。 只有處于吸頂?shù)呐R界值才會不相等
? ?  ?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é)點需求可以用延時方法或者操作事件來獲取。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題

    js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題

    本文主要介紹了js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • javascript CSS畫圖之基礎(chǔ)篇

    javascript CSS畫圖之基礎(chǔ)篇

    要在瀏覽器上動態(tài)地畫圖(矢量圖),個人覺得矢量圖中最關(guān)鍵的兩點.
    2009-07-07
  • 用原生JS獲取CLASS對象(很簡單實用)

    用原生JS獲取CLASS對象(很簡單實用)

    這篇文章主要介紹了如何用原生JS獲取CLASS對象,看過dom編程藝術(shù)的朋友或許會知道的
    2014-10-10
  • javascript實現(xiàn)數(shù)組最大值和最小值的6種方法

    javascript實現(xiàn)數(shù)組最大值和最小值的6種方法

    比較數(shù)組中數(shù)值的大小是比較常見的操作,本文主要介紹了javascript實現(xiàn)數(shù)組最大值和最小值的6種方法,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • 基于JavaScript介紹性能爆表的SolidJS

    基于JavaScript介紹性能爆表的SolidJS

    這篇文章主要介紹了基于JavaScript介紹性能爆表的SolidJS,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下
    2022-09-09
  • Bootstrap筆記—折疊實例代碼

    Bootstrap筆記—折疊實例代碼

    本篇文章主要介紹了Bootstrap筆記—折疊實例代碼,詳細的介紹了折疊效果實例,包括一組多組等,非常具有實用價值,需要的朋友可以參考下。
    2017-03-03
  • javascript中的prototype屬性實例分析說明

    javascript中的prototype屬性實例分析說明

    一說到prototype很多人可能第一個想到的是著名的prototype.js框架,當(dāng)然我們今天說的不是它,而是Javascript中的prototype屬性,一般都被翻譯為“原型”。這是一個比較特殊的屬性,Javascript中的繼承一般都依賴這屬性實現(xiàn)。
    2010-08-08
  • JavaScript實現(xiàn)可拖動模態(tài)框

    JavaScript實現(xiàn)可拖動模態(tài)框

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)可拖動模態(tài)框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • js中!和!!的區(qū)別與用法

    js中!和!!的區(qū)別與用法

    這篇文章主要介紹了js中!和!!的區(qū)別與用法,js中!的用法是比較靈活的,它除了做邏輯運算常常會用!做類型判斷,可以用!與上對象來求得一個布爾值,需要的朋友可以參考下
    2020-05-05
  • js實現(xiàn)數(shù)字跳動到指定數(shù)字

    js實現(xiàn)數(shù)字跳動到指定數(shù)字

    這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)字跳動到指定數(shù)字,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08

最新評論

陈巴尔虎旗| 泰宁县| 武义县| 阳朔县| 隆尧县| 重庆市| 木兰县| 郧西县| 樟树市| 徐汇区| 巴里| 扶绥县| 翁牛特旗| 葵青区| 开封县| 西乡县| 巢湖市| 兴业县| 新疆| 金昌市| 定襄县| 清远市| 庄浪县| 任丘市| 绥中县| 开平市| 徐闻县| 通州市| 罗甸县| 兴业县| 霍邱县| 鲜城| 红河县| 株洲市| 五大连池市| 商城县| 横山县| 平度市| 东明县| 平阴县| 开江县|