使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。以下列举一个示例：

scroll-top的优先级要高于scroll-into-view的优先级

<!--pages/scroll_view/scroll_view.wxml-->
<scroll-view scroll-y='true' scroll-top='50' upper-threshold='50' style='height:200px;' bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" scroll-with-animation='true' scroll-into-view="three" bindscroll="scroll">

<view style='background-color:red;height:100px;width:50px;'></view>
<view style='background-color:blue;height:100px;width:50px;'></view>
<view id='three' style='background-color:yellow;height:100px;width:50px;'></view>
<view style='background-color:green;height:100px;width:50px;'></view>

</scroll-view>

<scroll-view scroll-left="100" bindscrolltoupper="scrolltoupper" scroll-x='true' style='white-space: nowrap;display:flex;'>

<view style='background-color:red;height:100px;width:150px;display:inline-block;'></view>
<view style='background-color:blue;height:100px;width:150px;display:inline-block;'></view>
<view style='background-color:yellow;height:100px;width:150px;display:inline-block;'></view>
<view style='background-color:green;height:100px;width:150px;display:inline-block;'></view>

</scroll-view>

微信小程序视频教程

微信小程序scroll-view的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  3. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  4. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  5. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  6. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  7. 一个小时快速搭建微信小程序教程

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的 ...

  8. 一个小时快速搭建微信小程序

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的 ...

  9. 微信小程序如何像vue一样在动态绑定类名

    微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44   这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别, ...

  10. 微信小程序（一），授权页面搭建

    wxml代码如下: <!--pages/index2/index2.wxml--> <view class="index2Container"> <i ...

随机推荐

  1. 上位机开发之三菱FX3U以太网通信实践

    上次跟大家介绍了一下上位机与三菱Q系列PLC通信的案例,大家可以通过点击这篇文章:上位机开发之三菱Q系列PLC通信实践(←戳这里) 今天以三菱FX3U PLC为例,跟大家介绍一下,如何实现上位机与其之 ...

  2. 脚本学习一（echo、echo off、@、start）

    1.echo表示显示此命令后的字符 脚本: 输出结果: 2.echo off表示在此语句后所有运行的命令都不显示命令行本身 脚本: 输出结果: 3.@与echo off相象,但它是加在每个命令行的最前 ...

  3. 搭建Nexus Repository包管理系统

    搭建Nexus Repository包管理系统 下载安装程序 下载Nexus Repository最新版本 配置说明 将下载后的文件传输到服务器上 #修改配置文件 vi /etc/security/l ...

  4. AtomicLong AtomicDouble AtomicInteger

    Atomic+数字类型 大多都持有一个静态的Unsafe对象,通过unsafe 对属性在类对象的offset cas直接操作物理内存实现对数据的修改 public class AtomicLong e ...

  5. 泛微 e-cology OA 前台SQL注入漏洞

    0x00概述 该漏洞是由于OA系统的WorkflowCenterTreeData接口在收到用户输入的时候未进行安全过滤,oracle数据库传入恶意SQL语句,导致SQL漏洞. 0x01影响范围 使用o ...

  6. matlab单目相机标定——标定步骤以及参数含义

    参考博客园的一篇文章: https://www.cnblogs.com/flyinggod/p/8470407.html#commentform

  7. Chisel3 - bind - PortBinding

    https://mp.weixin.qq.com/s/NaInHsJgOwG03BLNF-wlxQ   介绍Module输入输出端口如何进行绑定.   ​​     1. IO()   在定义一个模块 ...

  8. （Java实现） 洛谷 P1319 压缩技术

    题目描述 设某汉字由N X N的0和1的点阵图案组成,如下图.我们依照以下规则生成压缩码.连续一组数值:从汉字点阵图案的第一行第一个符号开始计算,按书写顺序从左到右,由上至下.第一个数表示连续有几个0 ...

  9. Java实现 LeetCode 719 找出第 k 小的距离对（二分搜索法+二分猜数字）

    719. 找出第 k 小的距离对 给定一个整数数组,返回所有数对之间的第 k 个最小距离.一对 (A, B) 的距离被定义为 A 和 B 之间的绝对差值. 示例 1: 输入: nums = [1,3, ...

  10. Java实现 LeetCode 435 无重叠区间

    435. 无重叠区间 给定一个区间的集合,找到需要移除区间的最小数量,使剩余区间互不重叠. 注意: 可以认为区间的终点总是大于它的起点. 区间 [1,2] 和 [2,3] 的边界相互"接触& ...