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


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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
微信小程序 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版)
2012/08/21 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
python二维图制作的实例代码
2020/12/03 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
优良学风班申请材料
2014/02/13 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
个人年底工作总结
2015/03/10 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS