最近在完善以前项目，类目增多，需要进行横向滑动

实现方法1

　　可以在外盒子scroll-view使用white-space: nowrap来禁止子盒子换行，子盒子使用display: inline-block形成行内块级元素

实现方法2

　　使用flex布局的display: flex来进行左浮动，但不要放在外盒子scroll-view的类上面，会失效，所以在里面再建一层盒子

　　这里有个问题，当为列表的每个盒子设置宽度的时候，效果也会失效

　　

　　所以得转换一下，将width转换成max-wdith和min-width

　　　　

　　这样就可以了，里面的文字再怎么溢出，都不会超出这个范围

小程序使用scroll-view横向滑动时，flex布局失效问题的更多相关文章

  1. 解决微信小程序用 SpringMVC 处理http post时请求报415错误

    解决微信小程序用 SpringMVC 处理http post时请求返回415错误 写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax类似处理方法一致 小程序端请求代码 ...

  2. 使用wepy开发微信小程序商城第三篇：购物车（布局篇）

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...

  3. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

  4. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  5. 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  6. 转载：移动端+微信小程序实现，手机端滑动分页代码思路（ajax）

    //一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加 ...

  7. 微信小程序：scroll滑到指定位置

    概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...

  8. 小程序开发基础-view视图容器

    view 视图容器. // wxml <view class="section"> <view class="section__title"& ...

  9. 小程序做一个能够左右滑动切换的多tab页面

    主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...

随机推荐

  1. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式，导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  2. Bash Game hdu 1846

    (一)巴什博奕(Bash Game):只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个.最后取光者得胜. 显然,如果n=m+1,那么由于一次最多只能取m个,所以,无论先取者 ...

  3. List 数据分批入库

    直接贴代码,主要运用 List<E> subList(int fromIndex, int toIndex); 把 List 分割 /** * 保存批价结果 * * @param pric ...

  4. 【资源分享】Half-Life（半条命）中英版

    *----------------------------------------------[下载区]----------------------------------------------* ...

  5. C语言实例-大小写字母间的转换

    初学C语言都会遇到要求写大小写转换的题目 这类题目主要通过ASCII(美国信息交换标准代码)码差值实现,A对应ASCII码十进制数字是65,a对应ASCII码十进制数字是97,即大小写字母之间ASCI ...

  6. 私域流量&公域流量

    所谓私域流量,指的是个人拥有完全的支配权的账号所沉淀的粉丝.客户.流量,可以直接触达的,多次利用的流量.比如说QQ号.微信号.社群上的粉丝或者顾客,就属于是私域流量. 而与之相对的,就是所谓的公域流量 ...

  7. 搭建 VUE + NODE.JS + ElementUI 学习过程中问题总结

    1.exports 和 module.exports require 用来加载代码,而 exports 和 module.exports 则用来导出代码. module.exports 初始值为一个空 ...

  8. cpu io disk mem监控 python

    import psutil def cpu_information(): #scputimes(user=26.9, nice=0.1, system=50.27, idle=8551.89, iow ...

  9. django removing hardcoded URLs in template --- 使用变量，把url放在变量中 {% url 'namespace:name' %}

    urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^votes/', include("polls.urls", na ...

  10. 总结fiddler抓https包

    把fiddler工具>选项>https>勾选所有,点击actions,导出的证书导入到浏览器(打开右上角浏览器设置>选项>高级>证书>查看证书>证书机构 ...