引言: 在商品详情页面, 一般会有商品图显示, 商品主要信息, 评价, 商品详情等, 这时候最好是在最上面加上导航, 点击导航定位到对应的页面位置, 比如京东的商品详情页面
对于一般的 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;
- }
- }
来源: https://juejin.im/post/5c48307be51d45067235572d