直播系统搭建，实现页面多级来回切换支持滑动和点击操作

通过触发pagechange1方法中的事件对currentIndex来进行赋值，又通过currentIndex的改变使前端wxml对应更改，这个部分对滑动和点击的操作都一样，无非就是使currentIndex对应到各自的位置，通过数字来决定位置

<br>//滑动<br>  pagechange1: function (ee) {<br>    if ("touch" === ee.detail.source) {<br>      let currentPageIndex = this.data.currentIndex;<br>      currentPageIndex = (currentPageIndex + 1) % 2;<br>     <br>      this.setData({<br>        currentIndex: currentPageIndex,<br>      })<br>    }<br>  },<br>//点击tab时触发<br>  titleClick: function (e) {<br>    this.setData({<br>      //拿到当前索引并动态改变<br>      currentIndex: e.currentTarget.dataset.idx<br>    })<br>  },

这个部分完整代码如下：

wxml

<br><view><br>    <!-- Tab布局 --><br>    <view class='navBox'><br>        <view class='titleBox' bindtap='titleClick' data-idx='0'><br>            <text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">安卓</text><br>            <hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" /><br>        </view><br>        <view class='titleBox' bindtap='titleClick' data-idx='1'><br>            <text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">苹果</text><br>            <hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " /><br>        </view><br>    </view><br>    <!-- 内容布局 --><br>    <swiper class='swiperTtemBox' bindchange='pagechange1' current='{{currentIndex}}'><br>        <swiper-item class='swiperTtemBox'><br>            <view>内容1</view><br>        </swiper-item><br>        <swiper-item class='swiperTtemBox'><br>            <view>内容2</view><br>        </swiper-item><br>    </swiper><br></view>

wxss

<br>Page {<br>  /* 全局样式 */<br>  background: rgb(244, 245, 249);<br>  height: 100%;<br>  position: fixed;<br>}<br>.fontColorBox,<br>.fontColorBox1 {<br>  /* 文字默认颜色 */<br>  color: black;<br>}<br>.navBox {<br>  /* 顶部tab盒子样式 */<br>  width: 100%;<br>  height: 108rpx;<br>  background: white;<br>  display: flex;<br>  align-items: center;<br>  justify-content: center;<br>}<br>.navBox view:last-child {<br>  /* 最后一个tab标题的样式 */<br>  padding-left: 20%;<br>}<br>.titleBox {<br>  /* 未选中文字的样式 */<br>  color: rgb(168, 170, 175);<br>  font-size: 30rpx;<br>  display: flex;<br>  flex-direction: column;<br>  align-items: center;<br>}<br>.lineBox,.notLineBox{<br>  /* 选中及未选中底线共同样式 */<br>  width: 32rpx;<br>  height: 8rpx;<br>}<br>.lineBox {<br>  /* 选中底线样式 */<br>  background: rgb(43, 44, 45);<br>  margin-top: 16rpx;<br>  border-radius: 4rpx;<br>}<br>.notLineBox {<br>  /* 未选中底线样式 */<br>  background: transparent;<br>}<br>.swiperTtemBox {<br>  /* 底部内容样式 */<br>  height: 100vh;<br>  overflow: scroll;<br>  margin: 12rpx 0rpx;<br>  background: white;<br>  font-size: 28rpx;<br>}

<br>const app = getApp()<br>Page({<br>  data: {<br>    currentIndex: 0, //默认第一个<br>  },<br>  pagechange1: function (ee) {<br>    if ("touch" === ee.detail.source) {<br>      let currentPageIndex = this.data.currentIndex;<br>      currentPageIndex = (currentPageIndex + 1) % 2;<br>     <br>      this.setData({<br>        currentIndex: currentPageIndex,<br>      })<br>    }<br>  },<br>  //点击tab时触发<br>  titleClick: function (e) {<br>    this.setData({<br>      //拿到当前索引并动态改变<br>      currentIndex: e.currentTarget.dataset.idx<br>    })<br>  },<br>})

以上就是直播系统搭建，实现页面多级来回切换支持滑动和点击操作，更多内容欢迎关注之后的文章