简便写法
<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介绍的内容 -->
<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推荐的内容 -->
<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评价的内容 -->
<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({
/**
* 页面的初始数据
*/
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"
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
/** 设备信息 */
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
})
}
},
//监听滑动
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可以动态获取其他的高度 然后修改这里值 */
/** 获取方法参考文档 */
/** scrollTop 在模拟器上检测不是太灵敏 可在真机上测试 基本上不会出现延迟问题 */
var navtopHeight = 160;
if (this.data.scrollTop <= -navtopHeight) {
this.setData({
navFixed: true
})
} else {
this.setData({
navFixed: false
})
}
},
})
网友评论