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

实现方法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. 微信小程序使用wxParse实现接入富文本编辑

    简介 微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现. 但是富文本编辑提取到内容是html格式的,写法与小程序的wxml并不 ...

  2. RPA_播放语音

    验证码识别 from rpa.captcha.captcha import Captcha c = Captcha() log.info(tmp_file_path) captcha_result = ...

  3. Mac 配置cron

    请参考:https://www.cnblogs.com/EasonJim/p/7819635.html 查看 crontab 是否启动 sudo launchctl list | grep cron ...

  4. PHP实现敏感词过滤

    1.敏感词过滤方法 /** * @todo 敏感词过滤,返回结果 * @param array $list 定义敏感词一维数组 * @param string $string 要过滤的内容 * @re ...

  5. .NET基础拾遗（1）类型语法基础和内存管理基础【转】

    http://www.cnblogs.com/edisonchou/p/4787775.html Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理 (3)字符串 ...

  6. python中的基本类型

    字符串类型 字符串相当于羊肉串,而字符串就是一串被串起来的字符,在单引号.双引号或三引号内包裹一串字符.需要注意的是:三引号内的字符串可以换行,而单引号内的字符不行 name='anny' name= ...

  7. Laravel Vuejs 实战：开发知乎 （7）验证问题表单字段

    上一节代码中已经实现 下面代码中的validate内部配置就是: public function store(Request $request) { // $data = $request->v ...

  8. AtCoDeer and Election Report

    问题 G: AtCoDeer and Election Report 时间限制: 1 Sec  内存限制: 128 MB[提交] [状态] 题目描述 AtCoDeer the deer is seei ...

  9. 使用MQTT.fx客户端接入阿里云

    一.前期准备. 1.关于MQTT连接的属性:https://www.cnblogs.com/mhtc/p/11112153.html 2.关于阿里云配置工具的使用:https://www.cnblog ...

  10. Electron调用.Net的Dll以及将.Net程序作为子进程运行

    调用.Net Dll const edge = require('electron-edge-js'); var testDll = edge.func({ assemblyFile: ". ...