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


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中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
Vue header组件开发详解
Jan 26 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
uniapp开发小程序的经验总结
Apr 08 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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
用 JSON 处理缓存
2007/04/27 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
node跨域请求方法小结
2017/08/25 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python3爬虫学习入门教程
2018/12/11 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
零基础学python应该从哪里入手
2020/08/11 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
施工协议书范本
2014/04/22 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang