簡便寫法
<view class='topTabSwiper'>
<view class='one-tab' wx:for="{{swipertab}}" wx:key bindtap='bindchange' data-index="{{index}}">
<view data-current="0" class='{{currentData == index ? "tab-title-select" : "tab-title"}}'>{{item}}</view>
<view class='{{currentData == index ? "one-tab-line" : ""}}' data-current="{{index}}"></view>
</view>
</view>
<view style="height: {{windowHeight}}px;">
<scroll-view bindscroll='layoutScroll' scroll-y="true" style="height: 100vh;">
<scroll-view scroll-x="true" class="nav {{navFixed? 'positionFixed':''}}">
<!-- 導航欄 -->
<view class='topTabSwiper'>
<view class='one-tab' data-current="0" bindtap='checkCurrent'>
<view data-current="0" class='{{currentData == 0 ? "tab-title-select" : "tab-title"}}'>介紹</view>
<view class='{{currentData == 0 ? "one-tab-line" : ""}}' data-current="0"></view>
</view>
<view class='center-tab' data-current="1" bindtap='checkCurrent'>
<view data-current="1" class='{{currentData == 1 ? "tab-title-select" : "tab-title"}}'>推薦</view>
<view class='{{currentData == 1 ? "two-tab-line" : ""}}' data-current="1"></view>
</view>
<view class='tab' data-current="2" bindtap='checkCurrent'>
<view data-current="2" class='{{currentData == 2 ? "tab-title-select" : "tab-title"}}'>評價</view>
<view class='{{currentData == 2 ? "one-tab-line" : ""}}' data-current="2"></view>
</view>
</view>
</scroll-view>
<!-- 切換0介紹的內(nèi)容 -->
<view class='one-page' wx:if="{{currentData==0}}">
<view wx:for="{{pictures}}" data-index="{{index}}" wx:key="{{index}}">
<image src='{{item}}' class='repair-img'></image>
</view>
</view>
<!-- 切換1推薦的內(nèi)容 -->
<view class='two-page' wx:if="{{currentData==1}}">
<view wx:for="{{recommendPictures}}" data-index="{{index}}" wx:key="{{index}}">
<image src='{{item}}' class='recommend-img'></image>
</view>
</view>
<!-- 切換2評價的內(nèi)容 -->
<view class='three-page' wx:if="{{currentData==2}}">
</view>
</scroll-view>
</view>
page {
width: 100%;
height: auto;
background: #f3f3f3;
}
.nav {
background: white;
z-index: 99;
box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/
-webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}
.positionFixed {
position: fixed;
left: 0;
top: 0;
box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/
-webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}
/* 這個屬性特別重要Ｌ乙啤！不然樣式會崩掉 */
.topTabSwiper:after {
content: "";
clear: both;
display: block;
}
.one-tab {
width: 26vw;
float: left;
text-align: center;
padding: 10rpx 0;
height: 5.2vh;
line-height: 4.6vh;
}
.tab-title-select {
color: lightcoral;
font-size: 32rpx;
}
.tab-title {
font-size: 32rpx;
}
.one-tab-line {
width: 10vw;
border-bottom: 6rpx solid lightcoral;
margin-left: 8vw;
margin-top: 1vh;
margin-bottom: 0.2vh;
}
.center-tab {
width: 48vw;
float: left;
text-align: center;
padding: 10rpx 0;
height: 5.2vh;
line-height: 4.6vh;
}
.two-tab-line {
width: 10vw;
border-bottom: 6rpx solid lightcoral;
margin-left: 19vw;/*（48-10)/2讓紅線處在選項的中間*/
margin-top: 1vh;
margin-bottom: 0.2vh;
}
.tab {
float: left;
width: 26vw;
text-align: center;
padding: 10rpx 0;
height: 5.2vh;
line-height: 4.6vh;
}
.one-page {
background: white;
margin-top: 1vh;
}
.two-page{
background: white;
margin-top: 1vh;
}
.recommend-img{
width: 100vw;
height: 36vh;
}
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
scrollTop: '', //滑動的距離
navFixed: false, //導航是否固定
currentData: 0,
recommendPictures: [
"http://img3.imgtn.bdimg.com/it/u=338895088,3780206663&fm=26&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=2598427595,2652637564&fm=15&gp=0.jpg",
"http://img1.imgtn.bdimg.com/it/u=3806547188,2585718081&fm=15&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=720416758,2573876011&fm=26&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=1334930434,597258493&fm=26&gp=0.jpg"
]
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
var that = this;
/** 設(shè)備信息 */
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
},
// 獲取當前滑塊的index
bindchange: function(e) {
console.log('獲取當前滑塊的index')
const that = this;
that.setData({
currentData: e.detail.current
})
},
//點擊切換栅屏，滑塊index賦值
checkCurrent: function(e) {
console.log('點擊切換')
const that = this;
console.log(e.target.dataset.current)
if (that.data.currentData === e.target.dataset.current) {
return false;
} else {
that.setData({
currentData: e.target.dataset.current
})
}
},
//監(jiān)聽滑動
layoutScroll: function(e) {
this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
// console.log(this.data.scrollTop)
// console.log(this.data.navFixed)
/** 我這里寫了固定值 如果使用rpx 可用query可以動態(tài)獲取其他的高度 然后修改這里值 */
/** 獲取方法參考文檔 */
/** scrollTop 在模擬器上檢測不是太靈敏 可在真機上測試 基本上不會出現(xiàn)延遲問題 */
var navtopHeight = 160;
if (this.data.scrollTop <= -navtopHeight) {
this.setData({
navFixed: true
})
} else {
this.setData({
navFixed: false
})
}
},
})
