原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0211/388.html

常州微信小程序开发-锚点定位

引言：在商品详情页面，一般会有商品图显示、商品主要信息、评价、商品详情等，这时候最好是在最上面加上导航，点击导航定位到对应的页面位置，比如京东的商品详情页面

对于一般的PC端网页，只需要使用 <a href="#element_Id"> ，然后在地址栏最后加上#element_Id，就能很方便的跳转到该元素的位置。

那么，微信小程序该怎样解决呢？

解决思路

查找微信小程序的开发文档，发现可以使用scroll-view组件中的属性scroll-into-view实现

重点

1. 将page的高度设置为100%；

2. 导航常州网站开发建设下面的内容部分必须用 <scroll-view> 包起来

3. 设置scroll-view的高度=屏幕的高度-导航的高度

4. 设置scroll-view的属性 scroll-into-view="{{toView}}"

5. 设置scroll-view的属性 scroll-y="true"

6. 设置锚点 <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;

    }

  }

复制常州手游开发代码