最近開發(fā)了一款商城小程序秕重，打算整理一下商城小程序遇到的難點和解決方法。
好多網(wǎng)頁頁面元素非常多厉膀，信息量也非常大溶耘，用戶在使用過程中可以通過頁面導(dǎo)航實現(xiàn)快速的切換，而無需用戶來回滾動鼠標(biāo)站蝠，極大提高了用戶的體驗性汰具，本篇主要介紹在商城列表中如何使用錨點，話不多說上代碼菱魔。
效果圖
image
list.wxml
這是一個簡單的滾動視圖，錨點的關(guān)鍵屬性就在于
scroll-into-view="{{id}}"吟孙，通過這個id可以定位到滾動視圖中id名相同的view澜倦。
==注意: id不能為數(shù)字開頭或者包含中文==
<scroll-view class='list-left' scroll-into-view="{{id}}" scroll-y='true' scroll-with-animation='true'>
<view wx:for="{{list}}" wx:key="">
<view id="{{item.id}}">
{{item.name}}
</view>
</view>
</scroll-view>
list.css
滾動視圖必須設(shè)置寬和高，不然可能滾動的是整個頁面而不是滾動視圖
.list-left{
width: 20%;
height: 600rpx;
font-size:28rpx;
background: rgb(248, 248, 248);
color:#777676;
text-align: center;
}
list.js
通過改變id的值就可以進(jìn)行錨點定位
switchTab2: function (e) {
// console.log(e.currentTarget.dataset.id)
this.setData({
curIndex1: e.currentTarget.dataset.index,
tag:true,
id1: e.currentTarget.dataset.id
})
},
注意點
- id不能為數(shù)字開頭或者包含中文
- 滾動視圖的寬杰妓、高必須要設(shè)置
- 滾動視圖內(nèi)容要超過視圖本身的寬或者高才能看到效果
