小程序用scroll-view的scroll-to-view属性实现锚链接跳转

小程序没有锚链接，通过scroll-view可以实现类似锚链接的功能，点击锚链接，滚动条滚动到相应的位置

 wxml

<view class="wrap">
    <!--tab切换列表-->
    <view class="t-ul flex">
        <view class="li flexitem" wx:for="{{facitems}}" wx:key="*this" data-toview="{{item.en}}"bindtap="activeItem">{{item.name}}</view>
    </view>
    <!--滚动的内容content-->
    <scroll-view class="list-wrap"scroll-y scroll-into-view="{{toview}}">
        <view class="weui-panel" id="device">
            content1
        </view>
        <view class="weui-panel" id="phone">
            content2
        </view>
        <view class="weui-panel" id="intro">
           content3
        </view>
    </scroll-view>
</view>

wxss

// 这几个高度一定要设置,因为这里设置100%，所以父元素都设置100%，scroll-view才能继承父元素的高度，scroll-view一定要设置高度scroll-to-view才能生效
page{height: 100%;}
.wrap{font-size:26rpx;height: 100%;}
.t-ul{background: #fff;position:fixed;top:0;z-index:1;width:100%;}
.t-ul .li{height:70rpx;line-height: 70rpx;}
.list-wrap{height: 100%;padding-top:90rpx;}

js

Page({
  data: {
    facitems:[{name:"设施与服务",en:'device'},{name:"酒店电话",en:'phone'},{name:"酒店简介",en:'intro'}], // 这里item.en和content的id相同，相当实现锚链接
    cate:'device' // 初始view的位置
  },
   onLoad(){
   },
    activeItem(e){
    console.log(e)
    this.setData({
      cate: e.currentTarget.dataset.cate // 设置滚动到视图
    })
  }

})

 

转载于:https://www.cnblogs.com/leiting/p/9715677.html