微信小程序锚点跳

 点击导航 跳转到对应的区域

 

首先用小程序自带的锚点就需要用到scroll-view标签；

默认给个初始值 从第一个开始 albumnIndex:0 ；

接着获取当前点击的是第几个，也就是下标，把值重新赋值给 albumnIndex  ，就是下面代码中 albumtab 这个方法；

还有一点很重要，内容部分要给高度，否则不起作用

就是代码里

.albumCon{width:calc(100% - 64rpx);padding:0 32rpx;height: calc(100% - 120rpx);position: fixed;bottom: 0;left: 0;}

 

实现的具体代码如下：

1、导航部分

  <view class="albumList">
    <scroll-view 
        scroll-x="true" 
        scroll-into-view="NAV{{albumnIndex}}" 
        scroll-with-animation="true">

          <view bindtap="albumtab" 
                id="NAV{{index}}" 
                wx:for="{{albumnewdata}}" 
                wx:key="index" 
                data-index="{{index}}" class="albumItem {{albumnIndex==index?'cur':''}}" >{{item.mainAlbumName}}({{item.count}})</view> 
     
    </scroll-view>
  </view>

2、内容区域

  <view class="albumCon">
  <scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{albumnIndex}}" scroll-with-animation="true">
    <view wx:for="{{albumnewdata}}" wx:key="index"  class="albumConItem">
      <view id="NAV{{index}}" class="albumtitle">{{item.mainAlbumName}}</view>
      <view class="albumImg {{item.photo.length>=3?'_between':''}}" >
        <image  wx:for="{{item.photo}}" wx:for-index="childindex" wx:for-item="items"  src="{{items.imageName==null || items.imageName ==''?'/weixin/common/default_house_list_404.png': items.imageName}}" binderror="imgError" data-parent='{{index}}' data-imgindex="{{childindex}}"></image> 
      </view>
    </view>
  </scroll-view>
  </view>

3、js

  data: {
    albumnIndex:0
  },

  albumtab:function(e){
    var index=e.currentTarget.dataset.index;
    // console.log(index)
    this.setData({
      albumnIndex:index
    })
  },

4、css

.albumList{position:fixed;left:0;top:0;z-index:10;background:#fff;width:100%;width:calc(100% - 32rpx);padding-left:32rpx;padding-top:30rpx;padding-bottom:10rpx;}
.albumList scroll-view{width:100%;height:100%;white-space: nowrap;}
.albumList .albumItem{display: inline-block;color:#999;font-size: 30rpx;margin-right:60rpx;}
.albumList .albumItem.cur{color:#292B33;background:url("/weixin/bjnewhouse/bj_bottom.png") no-repeat bottom center;background-size:68rpx 20rpx;}

.albumCon{width:calc(100% - 64rpx);padding:0 32rpx;height: calc(100% - 120rpx);position: fixed;bottom: 0;left: 0;}
.albumConItem{margin-bottom: 55rpx;}
.albumtitle{color:#000;font-size:32rpx;margin-bottom:30rpx;}
.albumImg {/*justify-content: space-around;align-items: center;*/display: flex;flex-direction: row;flex-wrap: wrap;}
._between{justify-content:space-between;}
.albumImg image{width:218rpx;height:169rpx;margin:5rpx;}
.tui-city-scroll-y{height: 100%;  box-sizing: border-box;}