小程序?qū)Ш綕L動(dòng)到頭部后固定
2020-09-27|HiShop
導(dǎo)讀:小程序?qū)Ш綕L動(dòng)到頭部后固定 這也是小程序主界面經(jīng)常會(huì)使用的一種效果,那么如何開發(fā)實(shí)現(xiàn),下面為大家解答。...
小程序?qū)Ш綕L動(dòng)到頭部后固定 這也是小程序主界面經(jīng)常會(huì)使用的一種效果,那么如何開發(fā)實(shí)現(xiàn),下面為大家解答。
前段代碼這里是比較重要的
- <scroll-view scroll-x="true" class="nav {{navFixed? 'positionFixed':''}}" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
- <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
- <view class="nav-item {{currentNavTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
- </block>
- </scroll-view>
前段整體布局要使用scroll-view
- <scroll-view class="layout" bindscroll='layoutScroll' scroll-y="true" style="height: {{windowHeight}}px;">
- .positionFixed{
- position: fixed;
- left: 0;
- top: 0;
- }
data配置信息看好
- data: {
- adData: ['http://pic.qiantucdn.com/58pic/17/70/72/02U58PICKVg_1024.jpg', 'http://pic2.ooopic.com/12/09/64/46bOOOPICf5_1024.jpg'],
- navData: [
- {
- text: '首頁'
- },
- {
- text: '健康'
- },
- {
- text: '情感'
- },
- {
- text: '職場'
- },
- {
- text: '育兒'
- },
- {
- text: '糾紛'
- },
- {
- text: '青蔥'
- },
- {
- text: '上課'
- },
- {
- text: '下課'
- }
- ],
- currentNavTab: 0,
- scrollTop: '', //滑動(dòng)的距離
- navFixed: false, //導(dǎo)航是否固定
onLoad 方法獲取寬高
- wx.getSystemInfo({
- success: (res) => {
- this.setData({
- pixelRatio: res.pixelRatio,
- windowHeight: res.windowHeight,
- windowWidth: res.windowWidth
- })
- },
- })
js主要事件
- //導(dǎo)航點(diǎn)擊
- switchNav(event) {
- var cur = event.currentTarget.dataset.current;
- //每個(gè)tab選項(xiàng)寬度占1/5
- var singleNavWidth = this.data.windowWidth / 5;
- //tab選項(xiàng)居中
- this.setData({
- navScrollLeft: (cur - 2) * singleNavWidth
- })
- if (this.data.currentNavTab == cur) {
- return false;
- } else {
- this.setData({
- currentNavTab: cur
- })
- }
- },
- //監(jiān)聽滑動(dòng)
- layoutScroll: function (e) {
- this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
- console.log(this.data.scrollTop)
- console.log(this.data.navFixed)
- if (this.data.scrollTop <= -342) {
- this.setData({
- navFixed: true
- })
- } else {
- this.setData({
- navFixed: false
- })
- }
- }
以上代碼自己完善后即刻達(dá)到效果
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店