专栏首页vue学习小程序 — scroll-view组件实现滚动

小程序 — 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 条评论
登录 后参与评论

相关文章

  • 微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

    (1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

    Ewall
  • 小程序 — 选项卡

    (2)将用户点击传过来的index值赋给data中改变当前的索引值activeIndex

    Ewall
  • 实现手淘金刚区类目列表的scroll滑动效果

    (1)实现效果其实很简单,利用better-scroll暴露出的两个特性、translateX、Math对象

    Ewall
  • 全栈开发工程师微信小程序-上(中)

    750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.

    达达前端
  • uni学习笔记分享

    杨充
  • 微信小程序|scroll-view组件

    小程序的视图容器组件分为五个组件,分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件,如图2.1。这里介绍sc...

    算法与编程之美
  • Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)

    Android中View研究自学之路 http://blog.csdn.net/zrf1335348191/article/details/54171263 ...

    fanfan
  • Android "巧"仿蚂蚁森林水滴动效

    本文重在思路和性能,就不介绍自定义view和handler避免内存泄漏或是导致空指针这些了,喜欢请clone项目并star、fork一下,感谢各位。

    CCCruch
  • 前端-微信小程序开发(2):小程序基本介绍

    前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来:

    grain先森
  • android view转Bitmap生成截图的方法

    项目中经常会用到分享的功能,有分享链接也有分享图片,其中分享图片有的需要移动端对屏幕内容进行截取分享,说白了就是将view 转成bitmap 再到图片分享,还有...

    砸漏

扫码关注云+社区

领取腾讯云代金券