點擊導航 跳轉到對應的區域
首先用小程序自帶的錨點就需要用到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;}