微信小程式-錨點定位
摘要：
引言：在商品詳情頁面，一般會有商品圖顯示、商品主要資訊、評價、商品詳情等，這時候最好是在最上面加上導航，點選導航定位到對應的頁面位置，比如京東的商品詳情頁面
對於一般的PC端網頁，只需要使用 <a href="#element_Id"> ，...
引言：在商品詳情頁面，一般會有商品圖顯示、商品主要資訊、評價、商品詳情等，這時候最好是在最上面加上導航，點選導航定位到對應的頁面位置，比如京東的商品詳情頁面
對於一般的PC端網頁，只需要使用 <a href="#element_Id"> ，然後在位址列最後加上#element_Id，就能很方便的跳轉到該元素的位置。
那麼，微信小程式該怎樣解決呢？
解決思路
查詢微信小程式的開發文件，發現可以使用scroll-view元件中的屬性scroll-into-view實現
重點
-
將page的高度設定為100%；
-
導航下面的內容部分必須用
<scroll-view>包起來 -
設定scroll-view的高度=螢幕的高度-導航的高度
-
設定scroll-view的屬性
scroll-into-view="{{toView}}" -
設定scroll-view的屬性
scroll-y="true" -
設定錨點
<view id="position1">
注意：第4、5步不能換位置，一定是scroll-into-view在scroll-y的前面
上程式碼
WXNL
<view class="navigateBox">
<view @tap="toViewClick" data-hash="productBox" class="title {{toView=='productBox' ? 'checked':''}}">
<image wx:if="{{toView=='productBox'}}" src="../images/position.jpg"/>商品</view>
<view @tap="toViewClick" data-hash="commentBox" class="title {{toView=='commentBox' ? 'checked':''}}">
<image wx:if="{{toView=='commentBox'}}" src="../images/position.jpg"/>評價</view>
<view @tap="toViewClick" data-hash="infoBox" class="title {{toView=='infoBox' ? 'checked':''}}">
<image wx:if="{{toView=='infoBox'}}" src="../images/position.jpg"/>詳情</view>
</view>
<scroll-view style="height:{{winHeight}}" scroll-into-view="{{toView}}" scroll-y="true">
<view id="productBox">商品圖</view>
<view id="commentBox">商品評價</view>
<view id="infoBox">商品詳情</view>
</scroll-view>
複製程式碼
JS
data = {
winHeight: '100%',
toView: 'productBox',//錨點跳轉的ID
}
onLoad(){
let that = this;
wx.getSystemInfo({
success: function (res) {
//螢幕的寬度/螢幕的高度 = 微信固定寬度(750)/微信高度
that.winHeight = res.windowHeight-(res.windowWidth*90/750)+'px';//90為導航的告訴80+10(margin-bottom)
}
});
}
methods = {
toViewClick: function (e) {
this.toView = e.target.dataset.hash;
}
}
複製程式碼
WXSS
<style lang="less">
page{
height: 100%;
}
.navigateBox{
background: #fff;
height: 80rpx;
padding: 0 100rpx;
margin-bottom: 10rpx;
.title{
margin: 20rpx 46rpx;
float: left;
font-size: 27rpx;
width: 60rpx;
padding-left: 30rpx;
}
image{
width: 30rpx;
height: 30rpx;
margin-left: -30rpx;
}
.checked{
color: #f73c3c;
}
}
複製程式碼