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

实现方法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. Eclipse配置C++11环境详细介绍

    转:https://blog.csdn.net/wgxh05/article/details/54021049 本文记录Eclipse配置C++11开发所有作者遇到的情况,包括跨工程文件编译,内联文件 ...

  2. 【SSH】Spring 整合 Struts

    添加 spring-struts-3.2.9.RELEASE.jar struts-config.xml 添加 <controller> <set-property property ...

  3. 507，介绍一下标准的css盒子模型？低版本ie的盒子模型有什么不同的？

    有两种,IE盒子模型,另外是W3C盒子模型: 盒模型都包括:内容(content),填充(padding),边界(margin),边框(border): 区别:IE的content部分吧border和 ...

  4. [经验] Java 使用 netty 框架, 向 Unity 客户端的 C# 实现通信[2]

    在前一篇文章中, 我们实现了从Java netty 服务端到 unity 客户端的通讯, 但是在过程中也发现有一些问题是博主苦苦无法解决的, 但是还好终于有些问题还是被我找刀方法解决了, 现在把这些解 ...

  5. Validation failed for one or more entities. See ‘EntityValidationErrors

    try{ context.SaveChanges(); } catch (DbEntityValidationException ex) { var errorMessages = ex.Entity ...

  6. Azure IoT Hub 十分钟入门系列 （4）- 实现从设备上传日志文件/图片到 Azure Storage

    本文主要分享一个案例: 10分钟内通过Device SDK上传文件到IoTHub B站视频:https://www.bilibili.com/video/av90224073/ 本文主要有如下内容: ...

  7. Centos6.10-FastDFS-存储器Http配置

    Centos610系列配置 1.准备配置 cd /opt/download/fastdfs-master/confcp http.conf /etc/fdfs/http.confcp mime.typ ...

  8. 攻防世界 你知道什么是cookie吗？

    打开题目链接,提示我们查看cookie,cookie是HTTP协议中的一个重要参数,(对HTTP协议不是很熟悉的friends可以看看这个“HTTP协议其实就是这么简单”) 查看cookie的方法有很 ...

  9. Python--比较两个字典部分value是否相等（可以用于接口自动化）

    eg:例如你调用了一个新增的接口,以往功能测试的话,你再web端新增一个店铺之后,你肯定要去数据库中查看,这些数据插入的对不对,是否正确的插入了每个字段 # 比较两个字典部分是否相等 def comp ...

  10. falsk 使用celery后台执行任务

    # falsk 使用celery后台执行任务 1.基础环境搭建 doc:https://flask.palletsprojects.com/en/1.0.x/patterns/celery/ mkdi ...