主页 / 网络编程 /

微信小程序实现横向滚动导航栏效果

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了微信小程序实现横向滚动导航栏效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

1.page.wx.css内容如下

<view class='classify_list'>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
   <view class="classify">分类1</view>
  </view>

2，想要制作成的效果为

3，page.wxss

.classify_list{
 display: flex;
 font-size: 15px;
 width: 100%;
 overflow-y: scroll;
 white-space: nowrap; 
}
.classify{
 height: 100%;
 width: 100rpx;
 margin:25rpx;
}

4、注意点

一定要将设置宽度,并设置white-space: nowrap;

以上所述是长沙网络推广给大家介绍的微信小程序实现横向滚动导航栏效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！

上一篇：Servlet返回的数据js解析2种方法 下一篇：微信小程序 scroll-view 实现锚点跳转功能

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by