页面名称和图片都放在js的data里面,用for循环遍历出来显示。
用data-index={{index}},这样就可以再点击的时候取到当前的index。
data文件里设置currentIndex=0。
在wxml文件里,
通过
<view class="{{index==currentIndex?'newtitle':'title'}}" bindtap="click" data-index="{{index}}">
的方式来根据当前index和cueentIndex的关系来点击不同的页面。
在点击事件中,先用let clickIndex=event.currentTarget.dataset.index,用clickIndex暂时存下当前的页面的index,在把他设置到data数据里的currentIndex。this.setData({currentIndex:clickIndex});
这样就完成了点击。
========================================================================
切换轮播图的时候,上面的菜单栏也跟着动的方法是:
1.轮播图中的current设置成{{currentIndex}},然后添加一个changeitem方法。
这样每次滑动到哪个页面,就能知道当前滑到的页面。
======================================================================
最终效果图:
classify.js
// pages/classify/classify.js
Page({
/**
* 页面的初始数据
*/
data: {
arrs:[
{"name":"菜单","selectpic":"../images/棒球.png","pic":"../images/棒球.png"},
{"name":"轮播","selectpic":"../images/保龄球.png","pic":"../images/保龄球.png"},
{"name":"一起","selectpic":"../images/橄榄球.png","pic":"../images/橄榄球.png"},
{"name":"滑动","selectpic":"../images/击剑.png","pic":"../images/击剑.png"}
],
currentIndex:0
},
click(event){
let clickIndex=event.currentTarget.dataset.index;
this.setData({currentIndex:clickIndex});
console.log(clickIndex);
},
changeitem(event){
let p=event.detail.current;
this.setData({currentIndex:p});
console.log(p);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
classify.json
{
"usingComponents": {}
}
classify.wxml
<view class="pageview">
<view class="top">
<block wx:for="{{arrs}}">
<view class="{{index==currentIndex?'newtitle':'title'}}" bindtap="click" data-index="{{index}}">
<view class="img"><image src="{{index==currentIndex?item.selectpic:item.pic}}"></image></view>
<view class="{{index==currentIndex?'titletext':''}}">{{item.name}}</view>
</view>
</block>
</view>
<view class="main">
<swiper class="swp" current="{{currentIndex}}" bindchange="changeitem">
<swiper-item>
<view class="box box1">1</view>
</swiper-item>
<swiper-item>
<view class="box box2">2</view>
</swiper-item>
<swiper-item>
<view class="box box3">3</view>
</swiper-item>
<swiper-item>
<view class="box box4">4</view>
</swiper-item>
</swiper>
</view>
</view>
classify.wxss
/* pages/classify/classify.wxss */
.pageview{
width: 100%;
height: 100vh;
}
.top{
width: 100%;
height: 10%;
background-color:pink;
position: fixed;
left: 0;
top: 0;
display: flex;
align-items: center;
}
.title{
width: 25%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid snow;
}
.newtitle{
width: 25%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid orange;
}
.img{
width: 30%;
height: 60%;
}
.titletext{
color: coral;
}
.img>image{
width: 100%;
height: 100%;
}
.main{
padding-top: 10vh;
width: 100%;
height: 90%;
background-color: blueviolet;
}
.swp{
width: 100%;
height: 100%;
}
.box{
width: 100%;
height: 100%;
}
.box1{
background-color:skyblue;
}
.box2{
background-color: yellowgreen;
}
.box3{
background-color: peru;
}
.box4{
background-color: silver;
}