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

实现方法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. 转载UUID.randomUUID()

    UUID.randomUUID()生成唯一识别码 原创 清晨-阳光zx 最后发布于2019-04-11 20:54:40 阅读数 3039 收藏 发布于2019-04-11 20:54:40 分类专栏 ...

  2. Spring - 周边设施 - H2 embedded 版本引入

    1. 概述 在 Spring 开发中, 引入 H2 做辅助测试数据库 2. 场景 复习 Spring, 复习到 持久化 部分 需要一个 数据库 来做测试 方案 方案1: 搭建 MySQL 实例 虽然现 ...

  3. 解决laravel出现Syntax error or access violation: 1055 '***' isn't in GROUP BY

    laravel 5.3 以后默认开启 mysql严格模式(strict)在mysql在严格模式下, 并且开启了ONLY_FULL_GROUP_BY的情况下,group by 的字段没有出现在 sele ...

  4. jmeter实现对Oracle数据库的操作

    实现目的 有时候,根据业务需要,可能需要直接对数据库进行性能测试,此时可利用jmeter对Oracle.MySQL等数据库进行相关测试. 脚本实现 添加JDBC Connection Configur ...

  5. Python的几种主动结束程序方式

    1. sys.exit() 执行该语句会直接退出程序,这也是经常使用的方法,也不需要考虑平台等因素的影响,一般是退出Python程序的首选方法. 该方法中包含一个参数status,默认为0,表示正常退 ...

  6. Windows系统重装记录

    材料: u盘(需4g以上) windows官方镜像 附:windows个版本比较 步骤: u盘格式化(为了装启动盘系统需要清空数),备份系统盘所需要的的数据 下载适合自己的官方镜像,可从该网站下载(官 ...

  7. 自编C++游戏

    背景 周末无聊,于是编了一个类似于cmd的小玩意. 可是越想越不对劲,所以把它改成了一个小游戏. 信息 语言:DEV_C++ 源代码已公布!! 打败GG 版本:1.0(正式版) 版本:1.5(番外) ...

  8. rar文件简单分析

    1.rar文件也是由许多特定的块组成 注1:CRC为CRC32的低2个字节(MARK_HEAD的CRC 为固定的0x5261,非计算出来的值) 注2: HEAD_TYPE=0x72 标记块 HEAD_ ...

  9. 推荐算法之---FM算法；

    一,FM算法: 1,逻辑回归上面进行了交叉特征.算法复杂度优化从O(n^3)->O(k*n^2)->O(k*n). 2,本质:每个特征都有一个k维的向量,代表的是每个特征都有k个不可告人的 ...

  10. Truffle 快速构建 DApp

    简单介绍 官网传送门  Truffle是针对基于以太坊的Solidity语言的一套开发框架.本身基于Javascript,使用以太坊虚拟机(EVM)的世界一流的开发环境,用于区块链的测试框架和资产管道 ...