小程序 — scroll-view组件实现滚动

前言:这章我们使用小程序的scroll-view组件实现横向滚动和竖向滚动。 GitHub:https://github.com/Ewall1106/miniProgramDemo

1、竖向滚动

首先从简单的来,竖向滚动很简单,只用记住两点即可:

  • 首先得设置scroll-y属性;
  • 其次,一定要给scroll-view设置一个height高度;
<scroll-view scroll-y style="height: 200px;">
  <view class="green" style="width: 100%; height: 200px; background: green;"></view>
  <view class="red" style="width: 100%; height: 200px; background: red;"></view>
  <view class="yellow" style="width: 100%; height: 200px; background: yellow;"></view>
  <view class="blue" style="width: 100%; height: 200px; background: blue;"></view>
</scroll-view>

就这样我们就实现了竖向滚动:

竖向滚动

2、横向滚动

横向滚动就有点坑了...

  • 首先还是要设置滚动方向为scroll-x
  • 然后要给<scroll-view></scroll-view>设置white-spacenowrap不换行;
  • 最后需要将容器中包裹的标签的display属性设置为inline-block

横向滚动

<scroll-view scroll-x style="width: 100%; white-space: nowrap;">
  <view class="green" style="display: inline-block; width: 200px; height: 200px; background: green;"></view>
  <view class="red" style="display: inline-block; width: 200px; height: 200px; background: red;"></view>
  <view class="yellow" style="display: inline-block; width: 200px; height: 200px; background: yellow;"></view>
  <view class="blue" style="display: inline-block; width: 200px; height: 200px; background: blue;"></view>
</scroll-view>

就这样我们就实现了横向滚动的一个基本效果:

横向滚动

3、其它

(1)当然,关于scroll-view组件官网还提供了许多其它的属性和事件方法,大家仔细去看看:

部分截图来自小程序官网

参考学习https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CRPER折腾记

VS Code折腾记 - (3) 多图解VSCode基础功能

10420
来自专栏Golang语言社区

Golang实现类似Scan或者Scanf功能

package main import ( _"errors" "fmt" "io" "os"...

393120
来自专栏cnblogs

DOM事件第二弹(UIEvent事件)

此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正。 一、uitls.js(绑定事件公共类) var fixs = { 'focusin'...

19890
来自专栏林德熙的博客

win10 uwp 设置启动窗口大小 获取窗口大小 设置启动窗口获得窗口大小

ApplicationView.PreferredLaunchWindowingMode 设置UWP窗口全屏

49920
来自专栏Danny的专栏

HTML初识

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

13130
来自专栏十月梦想

Vue入门详解之Vue实现hello world!

前几天搞了从入门到放弃系列的Vue文章,发现每篇文章有点乱,可能思路不太清晰,用了几天发现Vue,恩,真香!继续来搞Vue,接下来详细介绍Vue入门,本篇来看一...

22130
来自专栏专业duilib使用+业余界面开发

duilib中获取的控件的位置或者大小不对的可能的原因

27140
来自专栏郭耀华‘s Blog

NetBeans的(默认)快捷键

NetBeans的(默认)快捷键 1、完成代码:ctrl+\ //任何地方按下此组合键,均会提示相应的参考字段;  2、错误提示:alt + enter /...

30060
来自专栏Python攻城狮

pycharm快捷键及一些常用设置

1. pycharm默认是自动保存的,习惯自己按ctrl + s 的可以进行如下设置:

10030
来自专栏河湾欢儿的专栏

js判断用户进入和离开当前页面

76610

扫码关注云+社区

领取腾讯云代金券