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

实现方法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. 优酷1080p的kux格式文件怎么转换为MP4格式？

    直接使用优酷自己的FFMPEG解码! 格式为:"优酷ffmpeg.exe的安装地址" -y -i ".kux文件储存地址" -c:v copy -c:a cop ...

  2. Codeforces Round #610 (Div. 2)E（模拟，DFS）

    先找到一条多边形的边,然后循环一圈输出多边形上的点.把每个三角形看作一个结点,以两个三角形之间公用边为边建立一张图,DFS输出叶子结点,则得到先切后切的顺序. #define HAVE_STRUCT_ ...

  3. 2017年陕西省网络空间安全技术大赛——人民的名义-抓捕赵德汉2——Writeup

    下载下来的文件是一个jar包,用die和binwalk检查,确实是一个纯正的jar包 java -jar FileName运行jar包,观察文件的外部特征,发现也是判断password的题目 ​ 用查 ...

  4. JS中数组实现（倒序遍历数组，数组连接字符串）

    // =================== 求最大值===================================== <script> var arr = [10,35,765 ...

  5. pycharm中可以运行的程序，在命令行中运行提示模块不存在的问题

    运行模块(包含main函数的模块),在模块开头添加以下代码,原因是pycharm运行python脚本时,会自动添加以下代码,将当前库加入到系统库目录集合中,在命令行中运行需要手动添加import os ...

  6. 脚本中的random几率问题详解

    random解释: 没有固定数值,随即给的意思,数值越大就几率越低,跟爆率也不多,如下脚本,所有都抽不到的话,就会执行最后面没有检测条件的那个.   [@main] #if random 10 #ac ...

  7. 类型不匹配 java.lang.IllegalArgumentException : argument type mismatch

    异常: 解决: money的类型是 float类型(把0.8改成 0.8f 即可)

  8. C++中的拷贝构造函数

    一.拷贝构造函数: 格式: A(const  A& a);  总结: 系统为对象B分配了内存并完成了与对象testA的复制过程,就类对象而言,相同类型的类对象是通过拷贝构造函数来完成整个复制过 ...

  9. 使用SQL计算宝宝每次吃奶的时间间隔(数据保障篇)

    目前程序从功能上其实已经完全满足客户(当然我这里的客户都是指媳妇儿^_^)需求,具体可参考: 使用SQL计算宝宝每次吃奶的时间间隔 使用SQL计算宝宝每次吃奶的时间间隔(续) 那么本篇 使用SQL计算 ...

  10. 【笔记8-Redis分布式锁】从0开始 独立完成企业级Java电商网站开发(服务端)

    Redis分布式锁 Redis分布式锁命令 setnx当且仅当 key 不存在.若给定的 key 已经存在,则 setnx不做任何动作.setnx 是『set if not exists』(如果不存在 ...