微信小程序--实现横向导航滚动

_Kay_

已于 2024-11-10 15:09:07 修改

阅读量1.9w

点赞数 20

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 notepad++ 小程序

于 2019-07-22 17:17:31 首次发布

本文链接：https://blog.youkuaiyun.com/brokenkay/article/details/96871720

目前在移动端头部横向导航属于一种很常见的页面结构,例如今日头条、网易新闻都采用了此方式将新闻进行分类.本篇文章以微信小程序为基础,实现横向滚动导航.最终的实现效果如下:

在项目中新建一个组件,将下面代码复制进去可直接运行.

wxml结构如下:

<view class='index_tab'>
      <scroll-view class="bottom_scroll" scroll-x="true" scroll-left="{
  
  {x}}" scroll-with-animation="{
  
  {true}}">
         <view class='nav {
  
  {item.brand_id == brand_id?"cur":""}}' wx:for="{
  
  {nav_list}}"  wx:key="{
  
  {item.brand_id}}"  data-id="{
  
  {item.brand_id}}"
         bindtap='switchTap' data-index="{
  
  {index}}">
          <view>{
  
  {item.brand_name}}</view>