编程 Javascript

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

Posted in Javascript onDecember 12, 2019

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;**

总结

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

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

- Author -

球球果果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 函数对象的多重身份

Jun 28 Javascript

JavaScript Chart 插件整理

Jun 18 Javascript

AngularJS入门教程（二）：AngularJS模板

Dec 06 Javascript

JQuery调用绑定click事件的3种写法

Mar 28 Javascript

JS将滑动门改为选项卡（需鼠标点击）的实现方法

Sep 27 Javascript

JS iFrame加载慢怎么解决

May 13 Javascript

Bootstarp 基础教程之表单部分实例代码

Feb 03 Javascript

JavaScript原型继承_动力节点Java学院整理

Jun 30 Javascript

EasyUI Tree树组件无限循环的解决方法

Sep 27 Javascript

详解vue项目中使用token的身份验证的简单实践

Mar 08 Javascript

详解TypeScript中的类型保护

Apr 29 Javascript

用React Native制作一个简单的游戏引擎

May 27 Javascript

微信小程序 scroll-view 实现锚点跳转功能

Dec 12 #Javascript

微信小程序scroll-view锚点链接滚动跳转功能

Dec 12 #Javascript

JavaScript实现文件下载并重命名代码实例

Dec 12 #Javascript

vue实现鼠标移过出现下拉二级菜单功能

Dec 12 #Javascript

微信小程序背景音乐开发详解

Dec 12 #Javascript

vue实现商城秒杀倒计时功能

Dec 12 #Javascript

深入理解 TypeScript Reflect Metadata

Dec 12 #Javascript