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


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

总结

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

Javascript 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
electron实现静默打印的示例代码
Aug 12 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
You might like
PHP 程序员应该使用的10个组件
2009/10/31 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
Python中input与raw_input 之间的比较
2017/08/20 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
党员一句话承诺大全
2014/03/28 职场文书
2014年会策划方案
2014/05/11 职场文书
倡导文明标语
2014/06/16 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers