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

实现方法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. Android App测试计划和设计测试矩阵

    Android APP :日程管理APP 测试计划(Test Plan): 编号 测试时间 测试类型 测试计划 1. 5.1~5.5 单元测试 单元测试是由程序员自己来完成,程序员有责任编写功能代码, ...

  2. go基础_接口断言

    // interface package main import ( "fmt" ) //定义一个接口,接口名字Inter,接口的方法集有2个方法 type Inter inter ...

  3. 多表连接面试题：ERROR：Not unique table/alias

      class_info id class_name 2 s204 5 s205 1 s207 7 s203 match_info id host_id guest_id match_time mat ...

  4. redis环境搭建学习笔记

    学习环境为windows.java环境 一.学习教程: 1.菜鸟教程:http://www.runoob.com/redis/redis-tutorial.html 2.redis中文网:http:/ ...

  5. python 处理form/data文件上传

    处理multipart/form-data 的java serverlet请求接口通过python实现 记住不要在头加:"Content-Type":"multipart ...

  6. 将linux上的项目传到github上

    在网友的帮助下,终于学会了这一招. 1.首先要确定你的linux上有安装了git. 2.到你的网页github上新建一个仓库,将其clone到linux上. 3.将你的项目放进这个空的仓库(文件夹). ...

  7. windows 10安装linux(ubuntu)子系统

    windows10安装ubuntu子系统系统 之前一直在虚拟机中使用linux系统,但是不是很方便,后来发现windows下也有了linux系统.感觉还不错 1. 打开windows应用市场micro ...

  8. 在linux下安装java（centos和ubuntu）

    在本地测试环境安装插件,发现还得用到java,虽说是个程序员,可是没用过java啊,哎,但是插件得用啊,怎么办啊?自己装呗 一.自己的系统:CentOS 7 1.查看CentOS自带JDK是否已安装. ...

  9. plutosdr初步

    关于最近新出的pluto sdr ,一款较新的sdr,可以通过破解将ad9363改成ad9361,提升频率范围,但是据说没有办法改变带宽. 可以通过补丁方式使用某款软件来进行收听fm

  10. SVM资源

    算法源码: SVM-From-Scratch:https://github.com/adityajn105/SVM-From-Scratch