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


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 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
jqgrid 简单学习笔记
May 03 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
浅谈jquery事件处理
Apr 24 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
详解AngularJS之$window窗口对象
Jan 17 Javascript
vue+element实现表单校验功能
May 20 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php常用的工具开发整理
2019/09/26 PHP
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
学python安装的软件总结
2019/10/12 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
聊聊python中的循环遍历
2020/09/07 Python
Python爬虫开发与项目实战
2020/12/16 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
电力工程合作意向书
2015/05/11 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android