使用場景，頂部導航的個數不確定，會有超出屏幕的情況，在一行展示，每點擊一個導航的tab會判斷是否向左或者像右滾動一個距離，以使當前的點擊的導航能看到。同時點擊導航會錨點跳轉對應樓層，當前導航會變爲激活狀態。滾動屏幕，滾動到對應樓層，對應導航變爲激活狀態。
1.代碼實現
1.1wxml
<!-- 樓盤相冊 -->
<scroll-view class='xcnyTab' scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">
<view wx:for='{{xcnyHead}}' class='xcnyTabLi {{currentTab == index ? "on" : ""}}' data-current="{{index}}" bindtap='clickMenu'>
{{item}}
<view class='xcnyTabLi-line'></view>
</view>
</scroll-view>
<!-- 所有種類 -->
<scroll-view scroll-y style='height:{{ht}}px;' scroll-with-animation="true" bindscroll="scrollRight" scroll-into-view="{{toViewRt}}">
<view class='xcnyAll'>
<!-- vr -->
<!-- a_type (vr: 11) (視頻: 12) (其他圖片) -->
<block wx:for="{{xcnyList}}" wx:for-item="list" wx:for-index="listidx">
<view class='xcnyAll-title' id='t{{listidx}}'>{{list.a_name}}</view>
<view class='xcnyAllList {{list.flag==1?"":"h523hidden"}}'>
<view class='xcnyAllList-wrap clearfix'>
<block>
<view class='xcnyAllLi' wx:for="{{list.a_photos}}" data-listidx="{{listidx}}" data-index="{{index}}" bindtap='godetail'>
<image class='xcnyAllLi-img' src='{{item.p_thumb}}'></image>
<!-- vr:11 -->
<view wx:if="{{list.a_type==11}}" class='xcnyAllLi-vr'></view>
<!-- 視頻: 12 -->
<view wx:if="{{list.a_type==12}}" class='xcnyAllLi-video'></view>
</view>
</block>
<block wx:if="{{12<list.a_photos.length}}">
<view class='xcnyAllLi-more' data-listidx="{{listidx}}" wx:if="{{!list.flag}}" bindtap='getmore'></view>
</block>
</view>
</view>
</block>
</view>
</scroll-view>
1.2wxss
.xcnyTab{
width: 100%;
white-space: nowrap;
border-top: 1rpx solid #f1f1f1;
border-bottom: 1rpx solid #f1f1f1;
}
.xcnyTabLi{
height: 80rpx;
display: inline-block;
width: 18.18%;
text-align: center;
position: relative;
font-size: 28rpx;
color: #404040;
line-height: 80rpx;
}
.xcnyTabLi.on{
color: #ff7500;
}
.xcnyTabLi.on .xcnyTabLi-line{
width: 36rpx;
height: 5rpx;
background-color: #ff7500;
position: absolute;
left: 50%;
margin-left: -18rpx;
top:60rpx;
}
/* 所有種類 */
.xcnyAll{
width: 716rpx;
margin: 0 auto;
}
.xcnyAll-title{
font-size: 32rpx;
color: #8a8a8a;
line-height: 34rpx;
padding-top: 40rpx;
}
.xcnyAllList{
width: 100%;
overflow: hidden;
margin-top: 25rpx;
position: relative;
}
.xcnyAllList.h523hidden{
max-height: 523rpx;
overflow: hidden;
}
.xcnyAllList-wrap{
width: 716rpx;
}
.xcnyAllLi-more{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAXCAYAAADa+mvTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUzMTQzOTA3QzdEMzExRTlCRjA4QjNCNjc1NDI2QzRFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUzMTQzOTA4QzdEMzExRTlCRjA4QjNCNjc1NDI2QzRFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTMxNDM5MDVDN0QzMTFFOUJGMDhCM0I2NzU0MjZDNEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTMxNDM5MDZDN0QzMTFFOUJGMDhCM0I2NzU0MjZDNEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Hl6ueAAAEoElEQVR42sRajZGqMBDGGRvIK4EWeCVgCVwJWAKWACVICViClCAlSAlSgi/xfbnZ20tCAhEzs+MdQnazu9/+YZJ4rufzmUu6SaqSDZfkJ8C73Jq3p3yalJxnSRm5tjntA2QXkjJJ/VLDyI/ccUvG/haglO3T73a7gV07s+fXrkHyOAbq5kpkOH7KwfZQiFJaOXOvVqzywNpDIRfD852vQsmn2meSNCpnkvtOFmfIPqTDCiQgp6LacqbLu4XZwaBFgLJ9ViMVfzKgtLDcPwK9ShEH+Wy/MAK4Vo4zfs1FGYvTcH4VQJD66kTSaROE4oBflnsKUIsD9EDDgGsuhFEFpDPoL+HdwmF4tSaTwbURPAy7yJAqN8Ip9Kfmc4GhJkso7nC+doFImUmXa4qRTtJDeaNS8vP/qpH4H/heeO5XP+Osm4PHbaO9b9BJOlOknHF/tbDIUXyuIc/vLUgqCWJUCBwoavD/Ad53l38r72vl9dFh09bhbWfw8glJk2d4M0WBAogaLbnQtY5AZo/za/SpzwOTS3+X49zNQlxdIFcOe7SgyQdBJRD3JEgUNP/p6wzFFHnq+dKBeBPVxIuFL82gSJjyN74rLLI5EWrLowSxAiipEL20Dte2IgJ73rHnw9Ue6YM+mFEyh0JqU34h4VkzLSKGQtMSLoMa6Nuglu+DDcqMeiVKv4NP7D6zAh9qqx98dJXbkbK6IAnfFLJ6S+icSOGUy7B0YBWhsOw3LSkYLFX0bWX7otqtvx7VdEb68pzwnFiILb1DZNgqCOmitn91FxGVMqsMphTdiM+2Eb7tBJF9aQ51ngHRqTI4slZoaxg0tG8cNGSk3lHryzUp+hOw8SOwX6RTlS7gWV+nabjxkQJeBuVDD8jkM1ZsWO88GKIVHTRcYOjC0NaNK42ZMpSq/aZ9hAZbBBgkI31Z4kBLsqAKnZMrWyKzQR8nPsslyuWDhsJgzLVDhgy6KNgEqqGDBdO6QthYfW2JSZCAEJkJLQ7jVJEiRhfhLHouneIzJ7nMdZ6SjAiX5M2S8Wo5v32ywcLwXPe1Ryji5WmR36BcHPm4AN9mTY+rKliGwpEotp+JMIKiKSAylSyqNbae3mXQQ0DIfTi+156lBDiiKa+JMsaAUDMXEhv1qg38jlR+yDGaquPQOTVkGUnFXyTuN1EVotMQWCDpIm8C33ZOXy6D5jFCrgqpcp8jwusUgKilOTTXCpZ8T+Cv0XmJcJ7WkENzgqIjmxjVxKEPgeF2XIDoaPPQWwCP+p080GzfSfOtzxT9FZtjblsxGcSnXnCfLIOFGDNWEy/fkNsFRoWeoEN7e7y3F+azZIRnSubTTbLR2htK+WGFtwrfdocouX8DaniPNkDBZ+Rvnft+/foh8Kx6WkRJh9oGNCUbrn2kkdnSAUAXyXgZDJYyxY4YMjQwQMnHZvL6RIYE+hcHI6ZGI+HReRRpdGK0qSE5QmOHId/9YgwWBFO2LiR6WsAgarxQAwPlxPipwUDfoVIZFobPyfkGMvHRkeYjRvyRbj7BFFXna8458w6Vz1HVrxUay34JRdWKYcE32gzjw18pJebwJcb6J8AAooj0Qjt0jkQAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
background-size:116rpx 23rpx;
position: absolute;
right: 18rpx;
bottom: 2rpx;
width: 169rpx;
height: 169rpx;
background-color: gray;
}
.xcnyAllLi{
width: 165rpx;
height: 165rpx;
float: left;
margin-right:14rpx;
position: relative;
margin-bottom: 14rpx;
}
.xcnyAllLi-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.xcnyAllLi-vr,.xcnyAllLi-video{
background-repeat: no-repeat;
background-position: center;
background-size:80rpx 80rpx;
width:80rpx;
height:80rpx;
position: absolute;
left: 50%;
top: 50%;
margin-left:-40rpx;
margin-top:-40rpx;
}
.xcnyAllLi-vr{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg0MTkxODQxQzdEMDExRTk5NzVBREU4MjExMjFEQkExIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg0MTkxODQyQzdEMDExRTk5NzVBREU4MjExMjFEQkExIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODQxOTE4M0ZDN0QwMTFFOTk3NUFERTgyMTEyMURCQTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODQxOTE4NDBDN0QwMTFFOTk3NUFERTgyMTEyMURCQTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ffvjIAAAPLElEQVR42uxd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);
}
.xcnyAllLi-video{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkEyNThDMzQ0QzdEMDExRTk4Q0I5OUY3QkQ2REJCOTNDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkEyNThDMzQ1QzdEMDExRTk4Q0I5OUY3QkQ2REJCOTNDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTI1OEMzNDJDN0QwMTFFOThDQjk5RjdCRDZEQkI5M0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTI1OEMzNDNDN0QwMTFFOThDQjk5RjdCRDZEQkI5M0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5Rj73TAAANI0lEQVR42uyd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);
}
3.js
var that;
var windowWidth = 0;
var windowHeight = 0;
// 滾動的高度
var scrolltop = 0;
Page({
/**
* 頁面的初始數據
*/
data: {
oldarr: [{
a_name: "類目1",
a_type: 11,
a_photos: [{
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg",
}],
},
{
a_name: "類目2",
a_type: 7,
a_photos: [{
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}]
},
{
a_name: "類目3",
a_type: 7,
a_photos: [{
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}]
},
{
a_name: "類目4",
a_type: 7,
a_photos: [{
p_thumb: "https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640"
}]
},
{
a_name: "類目5",
a_type: 12,
a_photos: [{
p_thumb: "https://images.unsplash.com/photo-1551446591-142875a901a1?w=640"
}]
},
{
a_name: "類目6",
a_type: 7,
a_photos: [{
p_thumb: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"
}, {
p_thumb: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"
}, {
p_thumb: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"
}]
},
{
a_name: "類目7",
a_type: 7,
a_photos: [{
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"
}]
},
{
a_name: "類目8",
a_type: 7,
a_photos: [{
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"
}, {
p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"
}]
}
],
xcnyHead: [],
xcnyList: [],
tabScroll: 0,
currentTab: 0,
windowHeight: '',
// 監聽各個種類的距離頂部的高度
element: [],
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function(options) {
that = this;
wx.getSystemInfo({ // 獲取當前設備的寬高，文檔有
success: (res) => {
windowWidth = res.windowWidth;
windowHeight = res.windowHeight;
that.setData({
ht: (windowHeight - 41)
});
},
});
that.getphoto();
},
// 獲取位置
getTitleTop(scrolltop = 0, cb = '') {
//獲取導航的初始位置
const query = wx.createSelectorQuery()
query.selectAll('.xcnyAll-title').boundingClientRect();
query.exec(function(res) {
res = res[0]
var arr = [];
for (var i = 0; i < res.length; i++) {
arr.push(res[i].top + scrolltop - 42)
}
that.setData({
element: arr
});
});
if (typeof cb == "function") {
cb(scrolltop);
}
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function() {
that.setData({
toViewRt: 't' + that.data.currentTab
});
},
// 點擊tab
clickMenu: function(e) {
//獲取當前tab的index
var current = e.currentTarget.dataset.current;
var type = e.currentTarget.dataset.type;
var tabWidth = windowWidth / 5;
// 導航tab共5個，獲取一個的寬度
that.setData({
tabScroll: (current - 2) * tabWidth //使點擊的tab始終在居中位置
})
if (that.data.currentTab == current) {
return false
} else {
that.setData({
currentTab: current,
toViewRt: 't' + current
})
}
},
// 滾動右側菜單
scrollRight(e) {
scrolltop = e.detail.scrollTop;
var element = that.data.element;
var elementIndex = getTimeIndex(element, scrolltop);
that.setData({
currentTab: elementIndex,
tabScroll: (elementIndex - 2) * (windowWidth / 5)
});
},
// 效果圖點擊查看更多
getmore(e) {
var listidx = e.currentTarget.dataset.listidx;
var key = 'xcnyList[' + listidx + '].flag'
that.setData({
[key]: 1
}, () => {
// 當全部展開時，需要重新獲取各個樓層的高度
that.getTitleTop(scrolltop);
});
},
// 進入查看大圖，a_type (vr: 11) (視頻: 12) (其他圖片)
godetail(e) {
var listidx = e.currentTarget.dataset.listidx;
var index = e.currentTarget.dataset.index;
var xcnyList = that.data.xcnyList;
// 類型
var a_type = xcnyList[listidx].a_type;
// 資源地址
var url = xcnyList[listidx].a_photos[index].p_url;
if (a_type == 11) {
console.log()
} else {
console.log()
}
},
// 樓盤相冊
getphoto() {
var res = that.data.oldarr;
console.log(res)
if (res.length) {
var xcnyHead = [];
var xcnyList = [];
for (var i = 0; i < res.length; i++) {
if (res[i].a_photos.length) {
res[i]['flag'] = 0;
xcnyHead.push(res[i].a_name);
xcnyList.push(res[i]);
}
}
that.setData({
xcnyHead: xcnyHead,
xcnyList: xcnyList
}, () => {
// 獲取位置
//獲取導航的初始位置
that.getTitleTop();
});
}
}
})
// 判斷在數組哪兩項之間
function getTimeIndex(timeArr, time) {
var timeIndex = -1;
for (var i = 0; i < timeArr.length; i++) {
if (timeArr[i] > time) {
timeIndex = i - 1;
break;
}
}
return timeIndex;
}
1.4 效果
2.說明
2.1 思路：
2.1.1這裏需要建立兩層數組，外層（包含標題）和內層（內層需要循環的部分），先通過循環把外層標題提取出來組成頂部的導航欄；
2.1.2通過scroll-view佈局，通過它實現錨點跳轉。不同尺寸的屏幕，尺寸需要做一個換算，獲取屏幕寬高對於現在的做一個適配；
2.1.3因爲有展開動作（查看更多），所以當展開時需要重新計算元素距離頂部的高度，可以把獲取高度封裝爲一個方法，最開始計算一次，點擊展開和收起再計算一次；
2.1.3在滾動過程中需要判斷當前滾動到第幾個，從而計算頂部tab切換到第幾個爲激活狀態；
2.1.4 在滾動到最底部時，並沒有切換到最後一個是正常現象，沒有到達它的條件；
2.2說明
2.2.1 觸屏導航詳見：https://blog.csdn.net/hangGe0111/article/details/88971087