点击导航 跳转到对应的区域
首先用小程序自带的锚点就需要用到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;}