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

实现方法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. [lua]紫猫lua教程-命令宝典-L1-01-01. Lua环境与IDE

    网上大把的lua教程  不过紫猫老师的教程向来都是讲的非常仔细 所以最近天气已经36+了 魔兽世界还需要冲飞行声望  懒得写单子根本没有单子,正好认认真真的看下紫猫老师的lua教程 紫猫老师的lua教 ...

  2. Android学习14

    Fragment Fragment是依赖于Activity的,不能独立存在的. 一个Activity里可以有多个Fragment. 一个Fragment可以被多个Activity重用. Fragmen ...

  3. MYSQL的索引类型：PRIMARY, INDEX,UNIQUE,FULLTEXT,SPAIAL 区别与使用场合

    normal 普通索引   unique 唯一的,不允许重复的索引 该字段信息保证不会重复例如身份证号用作索引时,可设置为unique full textl 全文搜索的索引 FULLTEXT 用于搜索 ...

  4. ElementUI+Vue在使用el-dialog时，如何做到在弹出dialog时，外部呈锁定状态，而不是点击外部导致dialog直接关闭。

    ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭. 问题描述 今天,在做Element+Vue项目时发现:Di ...

  5. 台电X16pro刷机记录

    Android: 如果要刷安卓,需要使用win7系统电脑,且需要安装java环境,同时按住 音量减+电源键进入刷机模式(DNX BOOT MODE..),这时在PhoneFlashTool_5.3.2 ...

  6. 激活4500-X RTU license

    1.查看设备license Switch#sho version Cisco IOS Software, IOS-XE Software, Catalyst 4500 L3 Switch Softwa ...

  7. 微信-获取openid

    第一步 首先把微信的支付流程与相关的文档熟悉一遍,具体的支付逻辑是怎么实现的,心里要有一定的路数,开发的时候一边看文档,一边写,再一边调试这是最好的选择,首先阅读微信开发文档,因为我们这次是做公众号支 ...

  8. Vue-路由传参query与params

    注明:vue中 $router 和 $route 的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router. ...

  9. Spring boot+Thymeleaf传参跳转

    $.ajax(): $.ajax({ type: "get", url:"/public/inform", async: true, data: detailJ ...

  10. eight（待考究）

    为什么明明结果都可以到达那种情况,步骤不一样就不给通过 QAQ 有哪位大佬提点一下,在下感激不尽~~~ 我的代码: #include <iostream>#include <queu ...