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

实现方法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. MySQL 避免使用字符串类型作为标识列

    避免使用字符串类型作为标识列: 消耗空间. 比数字类型慢(MyISAM 中对字符串使用压缩索引,查询会慢). 对于 MD5().UUID() 生成的随机字符串,这些值会分布在很大的空间内,导致 ins ...

  2. 五种网络IO模型以及多路复用IO中select/epoll对比

    下面都是以网络读数据为例 [2阶段网络IO] 第一阶段:等待数据 wait for data 第二阶段:从内核复制数据到用户 copy data from kernel to user 下面是5种网络 ...

  3. 毕向东java基础总结

    Java基础知识总结(超级经典) 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java ...

  4. 计算机二级-C语言-程序修改题-190108记录-字符串处理

    //程序修改题:给定程序MODI1.C中函数fun的功能是:先将字符串s中的字符按正序存放到t串中,然后把s中的字符按逆序连接到t串的后面.例如:当s中的字符串为:“ABCDE”时,则t中的字符串应为 ...

  5. 【设计模式】UML类图及Java的类之间的关系

    UML类图展示 设计模式中的对象关系 关联和依赖的对比 依赖关系 虚线箭头 依赖是a类成员方法中有b类的属性,动物新陈代谢方法中有水和空气的属性,只有调这个方法的时候,才可能临时用一下 关联关系 实线 ...

  6. 在ios微信客户端遇到的坑，input等错位

    1.判断移动端设备 // 处理iOS 微信客户端弹窗状态下调起输入法后关闭输入法页面元素错位解决办法 var ua = window.navigator.userAgent.toLowerCase() ...

  7. SPOJ Distinct Substrings

    给定一个字符串,求不相同子串个数.每个子串一定是某个后缀的前缀,那么原问题等价于求所有后缀之间的不相同子串个数.总数为n*(n-1)/2,再减掉height[i]的和就是答案 #include< ...

  8. 【C语言】字符数组，碎碎念

      存储方法: (1)字符数组赋值 ①初始化 ]={"China'} 或 ]="China' 注意:字符串可以不加{},单字符必须加 ]={,,} ②键盘输入 () char a; ...

  9. HDU 2063 过山车（二分图 && 匈牙利 && 最小点覆盖）

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2063 这是一道很经典的匈牙利问题: 把男同学看成左边点,女同学看成右边点,如果两个同学愿意同 ...

  10. PHP高级面试题

    在网上看到一些高级php 的面试题目.. 最近接连面试了几家公司,有些重要问题记录一下,督促自己学习提高,同时希望给朋友们一些帮助.内容很多,一点点完善,一步步学习..有些是面试被问,有些是招聘要求, ...