小程序用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:;z-index:;width:100%;}

.t-ul .li{height:70rpx;line-height: 70rpx;}

.list-wrap{height: 100%;padding-top:90rpx;}

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 // 设置滚动到视图

    })

  }

})