专栏首页前端开发随笔微信小程序使用scroll-view做导航栏

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

效果图

    <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>
.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;
}
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,
    })
  },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery.rotate.js实现转盘抽奖活动

    wePanda
  • Dart自定义类、构造函数

    wePanda
  • 微信小程序导航栏页面滑动切换

    wePanda
  • Docker的网络模式bridge、host、container other、overlay

    docker run创建Docker容器时,可以用--net选项指定容器的网络模式,Docker有以下5种网络模式: bridge模式:使用–net =bri...

    菲宇
  • 详解:32text-overflow各种值

    核心知识点;第一个classbox1我不讲你也懂是吧 那第二个呢?他是what?overflow:hidden;它代表超过我们所定义的宽高就会超过的部分会被裁...

    用户7873631
  • 1009. 分配任务

    1009. 分配任务 (Standard IO) 时间限制: 1000 ms  空间限制: 262144 KB  具体限制  题目描述 在社会实践活动中有三项...

    attack
  • JDBC连接ORACLE的三种URL格式

    格式一: Oracle JDBC Thin using an SID: jdbc:oracle:thin:@host:port:SID Example: j...

    我是李超人
  • 2020-09-07:Docker的四种网络类型?

    1.bridge模式:使用–net =bridge指定,默认设置。桥接式网络模式(默认)。

    福大大架构师每日一题
  • 10个实用的但偏执的Java编程技术

    在沉浸于编码一段时间以后(比如说我已经投入近20年左右的时间在程序上了),你会渐渐对这些东西习以为常。因为,你知道的……任何事情有可能出错,没错,的确如此。 这...

    程序员互动联盟
  • 「JS基础」Array 数组操作方法大全( 含ES6 )

    因为数组操作的方法有很多,我们在实际项目中又会经常使用,本篇文章笔者一次性整理常用的数组操作方法 ( 包含 ES6 的 map、forEach、every、so...

    前端达人

扫码关注云+社区

领取腾讯云代金券