微信小程序?qū)崿F(xiàn)錨點(diǎn)功能
更新時(shí)間：2019年11月20日 14:32:58 作者：￡AP︶ㄣOL◢◤LO
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錨點(diǎn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
“錨點(diǎn)”功能在實(shí)際應(yīng)用設(shè)計(jì)的好，可以提高用戶體驗(yàn)。今天碰到一個(gè)類似下面功能：
由于頁(yè)面數(shù)據(jù)比較多，除了做些上拉加載，下拉刷新等優(yōu)化。還可以進(jìn)行進(jìn)行分類，如上圖。功能要求:點(diǎn)擊導(dǎo)航的菜單，相應(yīng)頁(yè)面的分類內(nèi)容滑動(dòng)到頁(yè)面頂部。由于微信小程序頁(yè)面無dom操作，改功能改如何操作呢？
一開始想到 wx.pageScrollTo(Object object) 這個(gè)API，由于每個(gè)點(diǎn)擊每個(gè)導(dǎo)航利用wx.pageScrollTo滾動(dòng)到相應(yīng)分類的scrollTop不能確定，所以放棄了。
后發(fā)現(xiàn) scroll-view 組件 的屬性 scroll-into-view 可以利用一下：
<scroll-view scroll-y
scroll-into-view="{{toView}}"
bindscroll="scrollTopFun"
style='height:100vh'
scroll-top="{{scrollTop.scroll_top}}"
scroll-with-animation="true"
>
<!-- 內(nèi)容 -->
<view class='bg-white m-t10'>
<view class='flex'>
<view class='flex-1 f16 p-v text-center {{currentId === index? "active":""}}'
data-id="{{index}}" bindtap='navHandleClick'
wx:for="{{navietm}}" wx:key="{{index}}">{{item}}</view>
</view>
<view class='has-padding-sm'>
<!-- 實(shí)時(shí)停電信息 -->
<view>
<view class='m-t10' wx:for="{{navlist}}" wx:key="{{index}}">
<view class='itembox' id='{{item.id}}'>
<view class='titlebox flex'>
<view class='flex-1 text-ellipsis'>{{item.name}}</view>
<view class='f12'>
<text class='icon icon-like-o inline-middle'></text>
<text class='inline-middle m-l5'>加入關(guān)注</text>
</view>
</view>
<view class='itemconbox'>
<view class='flex c9'>
<view class='line m-r5 flex-1 self-middle'></view>
·<text class='p-w-sm'>昨天</text>·
<view class='line m-l5 flex-1 self-middle'></view>
</view>
<view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
<view class='border-line-b flex text-bold p-t5 p-b5'>
<view class='flex-1'>
<image src='../../images/date.png' class='ico-date inline-middle'></image>
<text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
</view>
<view>電網(wǎng)故障停限電</view>
</view>
<view class='p-w-sm p-v-sm'>
<view>
<text class='text-bold m-r10 c-11A99A'>送電時(shí)間:</text>
<text class='f12 c6'>2018-09-13 16:15:00</text>
<text class='label bg-A5A5A5'>預(yù)計(jì)</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
<text class='f12 c6'>[開福區(qū)] 湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>
<text class='f12 c6'>湖南省長(zhǎng)沙市開福區(qū)</text>
</view>
</view>
</view>
</view>
<view class='itemconbox'>
<view class='flex c9'>
<view class='line m-r5 flex-1 self-middle'></view>
·<text class='p-w-sm'>昨天</text>·
<view class='line m-l5 flex-1 self-middle'></view>
</view>
<view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
<view class='border-line-b flex text-bold p-t5 p-b5'>
<view class='flex-1'>
<image src='../../images/date.png' class='ico-date inline-middle'></image>
<text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
</view>
<view>電網(wǎng)故障停限電</view>
</view>
<view class='p-w-sm p-v-sm'>
<view>
<text class='text-bold m-r10 c-11A99A'>送電時(shí)間:</text>
<text class='f12 c6'>2018-09-13 16:15:00</text>
<text class='label bg-A5A5A5'>預(yù)計(jì)</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
<text class='f12 c6'>[開福區(qū)] 湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>
<text class='f12 c6'>湖南省長(zhǎng)沙市開福區(qū)</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='text-center p-t10 f12 c9'>
沒有更多信息了
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 導(dǎo)航 -->
<view class='nav-fixed' wx:if="{{scrollTop.goTop_show}}"> <!-- 滾動(dòng)到離頂部一定距離在顯示導(dǎo)航按鈕 -->
<view class='navitembtn shadow {{isnavfixed ? "":"navitembtned"}}' catchtap='navfixedHandleClick'>導(dǎo)航</view>
<view class='navconbox' hidden='{{isnavfixed}}'>
<view class='floor gotop' catchtap='gotop'>返回頂部</view>
<view class='floor' bindtap='clickScroll' data-id="{{item.id}}"
wx:for="{{navlist}}" wx:key="{{index}}">
{{item.name}}
</view>
</view>
</view>
Page({
data: {
isnavfixed:true, //是否顯示浮動(dòng)導(dǎo)航
toView:'', //顯示區(qū)域
navlist: [//地區(qū)數(shù)據(jù)
{
id:"list0",
name:'市區(qū)河?xùn)|'
},
{
id: "list1",
name: '市區(qū)河西'
},
{
id: "list2",
name: '長(zhǎng)沙縣'
},
{
id: "list3",
name: '望城區(qū)'
},
{
id: "list4",
name: '瀏陽(yáng)市'
},
{
id: "list5",
name: '寧鄉(xiāng)市'
}
],
scrollTop: {//豎直滾動(dòng)的位置
scroll_top: 0,
goTop_show: false
}
},
navfixedHandleClick(){
// 浮動(dòng)導(dǎo)航
this.setData({
isnavfixed: !this.data.isnavfixed
});
},
scrollTopFun: function (e) {
// 頁(yè)面滾動(dòng)到一定位置顯示導(dǎo)航
if (e.detail.scrollTop > 200) {
this.setData({
'scrollTop.goTop_show': true
});
} else {
this.setData({
'scrollTop.goTop_show': false
});
}
},
gotop(){
//返回頂部,
var _top = this.data.scrollTop.scroll_top;
_top == 1 ? _top = 0 : _top = 1
this.setData({
'scrollTop.scroll_top': _top,
'isnavfixed':true
});
console.log(this.data.scrollTop);
},
clickScroll: function (e) {
//點(diǎn)擊導(dǎo)航菜單滾動(dòng)
var toView = e.currentTarget.dataset.id
this.setData({
"toView": toView,
'isnavfixed': true
})
}
})
主要用到 scroll-view 組件 scroll-into-view 屬性；當(dāng)點(diǎn)擊導(dǎo)航菜單的時(shí)候，我們改變相應(yīng)的 scroll-into-view 的值，并且同時(shí)需要在 scroll-view 組件內(nèi)相應(yīng)位置處的子元素上定義相應(yīng)的 id；因?yàn)閟croll-into-view 值應(yīng)為某子元素 id，設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素。
scroll-view 組件使用的一些注意點(diǎn)：
1. scroll-into-view 與 上面提到的子元素id 不能以數(shù)字開頭
2.bindscroll 屬性 實(shí)時(shí)監(jiān)聽滾動(dòng) ； 如上面 頁(yè)面滾動(dòng)到一定位置顯示導(dǎo)航按鈕功能
3.scroll-top 、scroll-left 屬性： 設(shè)置豎向或者橫向滾動(dòng)條位置，如上面 返回頂部 功能
4.scroll-with-animation 屬性：滾動(dòng)平滑過渡，提高體驗(yàn)
5.如果需要隱藏 scroll-view 的滾動(dòng)條使用 css ::-webkit-scrollbar{width: 0;height: 0;color: transparent;}
6.如果scroll-view占頁(yè)面整個(gè)高度，可設(shè)置 scroll-view的高度 height:100vh , 設(shè)置height:100%無效 （vh：相對(duì)于視口的高度。視口被均分為100單位的vh）
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的方法實(shí)例
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)跳轉(zhuǎn)
- 微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)到錨點(diǎn)左側(cè)導(dǎo)航欄點(diǎn)餐功能(點(diǎn)擊種類,滾動(dòng)到錨點(diǎn))
- 微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能
- 微信小程序scroll-view錨點(diǎn)鏈接滾動(dòng)跳轉(zhuǎn)功能
- 小程序?qū)崿F(xiàn)錨點(diǎn)滑動(dòng)效果
- 微信小程序 scroll-view實(shí)現(xiàn)錨點(diǎn)滑動(dòng)的示例
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)定位樓層跳躍的實(shí)例
- 微信小程序商城分類滾動(dòng)列表錨點(diǎn)的項(xiàng)目實(shí)踐
相關(guān)文章
js history對(duì)象簡(jiǎn)單實(shí)現(xiàn)返回和前進(jìn)
返回和前進(jìn)大家應(yīng)該不陌生吧，瀏覽器上面的返回和前進(jìn)按鈕大家瀏覽網(wǎng)頁(yè)時(shí)都會(huì)應(yīng)到的，下面就為大家介紹下js中是如何實(shí)現(xiàn)所謂的返回和前進(jìn)2013-10-10
本篇文章主要介紹了用p5.js制作煙花特效的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
JS封裝的自動(dòng)創(chuàng)建表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS封裝的自動(dòng)創(chuàng)建表格的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
javascript實(shí)現(xiàn)獲取指定精度的上傳文件的大小簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)獲取指定精度的上傳文件的大小簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了JavaScript 接口原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript 接口原理、優(yōu)缺點(diǎn)、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
functional繼承模式 摘自javascript:the good parts
javascript:the good parts 書中Inheritance部分講到了一種functional的繼承方式, 具體這個(gè)functional該如何翻譯,就不是很清楚了, 就直接意會(huì)一下吧2011-06-06
這篇文章主要介紹了javascript遞歸函數(shù)定義和用法示例分析，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
javascript精確統(tǒng)計(jì)網(wǎng)站訪問量實(shí)例代碼
網(wǎng)站一般都有訪問量統(tǒng)計(jì)工具，比較高效實(shí)用的工具多種多樣，這篇文章主要介紹了javascript精確統(tǒng)計(jì)網(wǎng)站訪問量實(shí)例代碼，感興趣的小伙伴們可以參考一下2015-12-12
基于JavaScript實(shí)現(xiàn)猜數(shù)字游戲代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)猜數(shù)字游戲代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JS構(gòu)造一個(gè)html文本內(nèi)容成文件流形式發(fā)送到后臺(tái)
本文通過實(shí)例代碼給大家介紹了JS構(gòu)造一個(gè)html文本內(nèi)容成文件流形式發(fā)送到后臺(tái)的相關(guān)資料,需要的朋友可以參考下2018-07-07