编程 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中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