微信小程序中scroll-view的几个坑

1:设置scroll-x时,却不能横向滚动,因为view是block组件,但是这里用了flex就不能滚动了(想用flex布局,请开启属性enable-flex).所以只能给你的scroll-view设置如下

  overflow: hidden;

  white-space: nowrap;

2:隐藏滚动条,加如下css

::-webkit-scrollbar {

  width: 0;

  height: 0;

  color: transparent;

}
  • 上边这段代码的是用伪类选择器设置滚动条样式,transparent的意思是完全透明

    3:当我们是竖向滚动时,动态设置height .参考这一篇博客

微信小程序中scroll-view的几个坑的更多相关文章

  1. 微信小程序全面实战，架构设计 && 躲坑攻略(小程序入门捷径教程)

    最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...

  2. 微信小程序中如何实现分页下拉加载？（附源码）

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  3. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  4. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  5. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  6. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  7. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  8. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

  9. 微信小程序中的 hover-class

    微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button ...

  10. 微信小程序中this关键字使用技巧

    转自:https://blog.csdn.net/qq_33956478/article/details/81348453 微信小程序中,在wx.request({});方法调用成功或者失败之后,有时 ...

随机推荐

  1. HTML5实时语音通话聊天，MP3压缩传输3KB每秒

    目录 一.把玩方法 二.技术特性 (1)数据传输 (2)音频采集和编码 (3)音频实时接收和播放 三.应用场景 自从Recorder H5 GitHub开源库优化后,对边录边转码成小语音片段文件实时上 ...

  2. python 32 操作系统与进程

    目录 1. 操作系统 1.1 作用 1.2 操作系统的发展 2. 进程的理论 2.1 相关名词 2.2 进程的创建 2.3 进程的状态: 1. 操作系统 ​ 管理.控制.协调计算机硬件与软件资源的计算 ...

  3. ionic 页面动画 ngAnimate

    git 地址: https://github.com/Augus/ngAnimate/ 使用方法: 下载后, 1.引入ngAnimate.js(依赖jquery); 2.引入 ng-animate.c ...

  4. 【原创】Linux Suspend流程分析

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  5. Interger等包装类的比较

    Integer a = 1; integer b = 1; integer c = 500; integer d=500; System.out.print(a==b); System.out.pri ...

  6. Redis数据类型的基本操作

    Redis数据类型的基本操作 一.string类型 1.设置value

  7. 牛客 136J-洋灰三角 +高中数学博大精深

    参考学习:http://www.cnblogs.com/l609929321/p/9500814.html 牛客 136J-洋灰三角 题意: 在一个1 * n的棋盘中,第一格放1,之后的每一个放前一个 ...

  8. 2019 Multi-University Training Contest 5

    2019 Multi-University Training Contest 5 A. fraction upsolved 题意 输入 \(x,p\),输出最小的 \(b\) 使得 \(bx\%p&l ...

  9. lightoj 1173 - The Vindictive Coach（dp）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1173 题解:像这种题目显然可以想到n为几时一共有几种排列可以递推出来.然后就是 ...

  10. codeforces 830 B. Cards Sorting（线段树）

    题目链接:http://codeforces.com/contest/830/problem/B 题解:其实这题就是求当前大小的数到下一个大小的数直接有多少个数,这时候可以利用数据结构来查询它们之间有 ...