微信小程序：轮播图和导航栏同时滑动

页面名称和图片都放在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;
}