微信小程序使用scroll-view做导航栏

效果图

代码语言：javascript复制

    <scroll-view class="banner" scroll-x="true" scroll-with-animation="true"
        scroll-into-view="nav-{{select > 0 ? select -1 : select}}">
        <view wx:for="{{data_list}}" wx:for-index="index" wx:key id="nav-{{index}}" catchtap="getselect"
            data-index='{{index}}' class="row {{index == select ? 'hover' : ''}}">
            {{item.catname}}
        </view>
    </scroll-view>

代码语言：javascript复制

.banner {
    width: 100%;
    white-space: nowrap;
    padding: 20rpx 50rpx;
    box-sizing: border-box;
}

.row {
    display: inline-block;
    font-size: 28rpx;
    color: #666666;
    margin-right: 72rpx;
}

.hover {
    color: #0C6D4A;
    border-bottom: 1rpx solid #0C6D4A;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

代码语言：javascript复制

data: {
    select: 0,
    data_list: [{
        catname: '电视剧'
      },
      {
        catname: '电影'
      },
      {
        catname: '综艺'
      },
      {
        catname: '少儿'
      },
      {
        catname: '动漫'
      },
      {
        catname: 'NBA'
      },
      {
        catname: '体育'
      },
      {
        catname: '财经'
      },
      {
        catname: '历史'
      },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  //滚动条选择
  getselect(e) {
    this.setData({
      select: e.currentTarget.dataset.index,
    })
  },

scroll view 微信小程序

0 人点赞