小程序用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 // 设置滚动到视图
    })
  }

})

 

posted @ 2018-09-29 09:38  c-137Summer  阅读(383)  评论(0编辑  收藏  举报