专栏名称: 孟小欢
目录
相关文章推荐
51好读  ›  专栏  ›  孟小欢

微信小程序-锚点定位

孟小欢  · 掘金  · 小程序技术  · 2019-01-24 03:39

正文

阅读 47

微信小程序-锚点定位

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

对于一般的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;
    }
  }
复制代码