需要阅读上文 点我跳转 , 如果你已经理解如何实现点击文字变色原理，可以直接阅读本文

scroll-view

这是一个可滚动视图区域，我们需要先设置可滑动导航栏

wxml

  1. <scroll-view scroll-x="true" >
  2.   <view bindtap="add" class="{{ index === current ? 'active' : '' }}" data-index="{{index}}" wx:for="{{title}}" wx:key="{{index}}">{{item}}</view>
  3. </scroll-view>

wxss

  1. scroll-view{
  2.   background: black;
  3.   width: 100%;
  4.   height: 50rpx;
  5.   white-space: nowrap;
  6. }
  8. view{
  9.   color: white;
  10.   display: inline-block;
  11.   width: 30%;
  12. }
  14. .active{
  15.   color: red;
  16. }
  18. .active:after{
  19.   content: '';
  20.   width: 30%;
  21.   height: 2rpx;
  22.   background-color: pink;
  23.   display: block;
  24. }

图片.png

  • scroll-x 向右滑动许可，默认为fasle
  • white-space :nowrap 合并连续的空白与换行，否则无法实现右滑

    swiper

    这是一个滑块视图容器（也可以实现轮播图）

    wxml

    1. <swiper current="{{current}}">
    2. <swiper-item  wx:for="{{[0,1,3,4,5] }}">
    3.  {{item}}
    4. </swiper-item>
    5. </swiper>
    // 设置它的 下标 current 在swiper-item中实现翻页

js

  1. const app = getApp()
  3. Page({
  4.   data: {
  5.       title:['数据1','数据2','数据3','数据4','数据5','数据6','数据7'],
  6.       current:null
  7.   },
  8.   onLoad: function () {
  10.   },
  11.     add(e){
  12.      let index = e.currentTarget.dataset.index
  13.      this.setData({current : index})
  15.     }
  16. })