实现方法:
微信小程序的开发文档,发现可以使用scroll-view组件中的属性scroll-into-view实现
代码部分:
wxml
<view class="navigateBox"> <view bindtap="toViewClick" data-hash="productBox" class="title {{toView==‘productBox‘ ? ‘checked‘:‘‘}}"> <image wx:if="{{toView==‘productBox‘}}" src="../images/position.jpg"/>商品</view> <view bindtap="toViewClick" data-hash="commentBox" class="title {{toView==‘commentBox‘ ? ‘checked‘:‘‘}}"> <image wx:if="{{toView==‘commentBox‘}}" src="../images/position.jpg"/>评价</view> <view bindtap="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.setData({
winHeight: res.windowHeight-(res.windowWidth*90/750)+‘px‘ //90为导航的告诉80+10(margin-bottom)
})
}
});
}
toViewClick: function (e) {
this.setData({
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; } }
总结:
-
将page的高度设置为100%;
-
导航下面的内容部分必须用
<scroll-view>
包起来 -
设置scroll-view的高度=屏幕的高度-导航的高度
-
设置scroll-view的属性
scroll-into-view="{{toView}}"
-
设置scroll-view的属性
scroll-y="true"
-
设置锚点
<view id="position1">