专栏首页达达前端小程序开发基础-scroll-view 可滚动视图区域

小程序开发基础-scroll-view 可滚动视图区域

标题图

小编 / 达叔小生

查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

小程序开发基础-scroll-view 可滚动视图区域

这里只展示纵向滚动,横向同理就不用说明了,可自己尝试,横向滚动属性为scroll-x,把纵向滚动改为横向滚动即可。

效果图1

scroll-view视图组件

scroll-yscroll-view的属性,scroll-y类型为Boolean,默认值为false,表示允许纵向滚动,scroll-y="true"允许纵向滚动

bindscrolltoupperscroll-view的属性,bindscrolltoupper类型为EventHandle,表示滚动到顶部/左边,会触发scrolltoupper事件,顶部/左边,是因为滚动视图可以横向滚动和纵向滚动,bindscrolltoupper="upper"定义绑定事件,在逻辑代码中编写,滚动到顶部,触发scrolltoupper事件。

bindscrolltolowerscroll-view属性,与上述bindscrolltoupper同理,bindscrolltolower的类型也是EventHandlebindscrolltolower表示滚动到底部/右边,会触发scrolltolower事件,bindscrolltolower="lower"表示绑定事件lower,会触发scrolltolower事件。

bindscrollscroll-view属性,类型是EventHandle,表示滚动触发,与上述bindscrolltoupper属性和bindscrolltolower属性范围广,bindscroll滚动触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

在定义scroll-view时,要给它一个固定的高度,通过wxss也可以内部样式,给设置个height属性,如style="height:200px;"

scroll-into-viewscroll-view的属性,类型为String类型,表示值应为某子元素的id,甚至哪个方向可滚动,则在哪个方向滚动到该元素。代码中scroll-into-view="{{toView}}"toView的值到js中的data中。

scroll-topscroll-view的属性,类型为Number类型,表示值应为设置竖向滚动条位置,同时横向有个scroll-left属性。

<!-- index.wxml -->
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
 ...
</scroll-view>

给这个视图组件加几个视图,一个视图高度以给定"height:200px"

  <view id="green" class="scroll-view-item bc_green"></view>
  <view id="red" class="scroll-view-item bc_red"></view>
  <view id="yellow" class="scroll-view-item bc_yellow"></view>
  <view id="blue" class="scroll-view-item bc_blue"></view>

再给两个按钮,一个是点击效果为,下一个视图,如同翻页的效果,点击按钮切换到下一个view,另一个按钮的点击效果为,设置滚动条位置实现画面滚动,就是下移或上移等。

click me to scroll into view为点击我跳转到下一个view视图 click me to scroll为点击我进行滚动

<!-- index.wxml -->
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <view id="green" class="scroll-view-item bc_green"></view>
  <view id="red" class="scroll-view-item bc_red"></view>
  <view id="yellow" class="scroll-view-item bc_yellow"></view>
  <view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="btn-area">
  <button size="mini" bindtap="tap">click me to scroll into view </button>
  <button size="mini" bindtap="tapMove">click me to scroll</button>
</view>

scroll-view属性表格

属性名

说明

scroll-x

表示允许横向滚动

scroll-y

表示允许纵向滚动

upper-threshold

表示距顶部或者左边多远时(单位为px),触发scrolltoupper事件

lower-threshold

表示距底部或者右边多远时时(单位为px),触发scrolltolower事件

scroll-top

表示设置竖向滚动条位置

scroll-left

表示设置横向滚动条位置

scroll-into-view

表示指应为某子元素id(id不能以数字开头),设置哪个方向可滚动,则在哪个方向滚动到该元素

scroll-with-animation

表示在设置滚动条位置时使用动画过渡

bindscrolltoupper

表示滚动到顶部或左边,会触发scrolltoupper事件

bindscrolltolower

表示滚动到底部或右边,会触发scrolltolower事件

bindscroll

表示滚动时触发

enable-back-to-top

表示iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向

class="scroll-view-item bc_green"中,在wxss样式定义,高度为200px,如果没有就不会出现,你可以自己试试,margin属性定义,四周都是10px,其它为背景颜色而已。

/* index.wxss */
/* .scroll-view_H{
  white-space: nowrap;
} */
.scroll-view-item{
  height: 200px;
}
/* .scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
} */

.btn-area button{
  margin: 10px;
}



.bc_green {
  background-color: green;
}

.bc_red {
  background-color: red;
}

.bc_yellow {
  background-color: yellow;
}

.bc_blue {
  background-color: blue;
}

逻辑index.jsupper为滚动条滚到顶部的时候触发,lower为滚动条滚到底部的时候触发,scroll为滚动条滚动后触发,tap为点击按钮切换到下一个viewtapMove为通过设置滚动条位置实现画面滚动。

// index.js
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
  // 滚动条滚到顶部的时候触发
  upper: function(e) {
    console.log(e)
  },
  // 滚动条滚到底部的时候触发
  lower: function(e) {
    console.log(e)
  },
  // 滚动条滚动后触发
  scroll: function(e) {
    console.log(e)
  },
  // 点击按钮切换到下一个view
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  //通过设置滚动条位置实现画面滚动
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

toView: 'green',为scroll-into-view显示在green绿色的地方,在index.wxml中的scroll-into-view="{{toView}}"scrollTop: 100,为scroll-top="{{scrollTop}}"在显示时就是绿色的占一半,红色的占一半,因为总的才200px嘛。

scroll-top的用途说明一下,为甚至竖向滚动条位置。scroll-into-view为滚动到该元素,简要的说。总的来说,值应为某子元素idid不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素,可知道要id,所以在index.wxml中有了<view id="green" class="scroll-view-item bc_green"></view>这个描述,里面的id="green"

这样就可以理解以下代码:

  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
// scrollLeft:是用来横向的嘛
var order = ['red', 'yellow', 'blue', 'green', 'red']
  // 点击按钮切换到下一个view
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },

重要事项:

重要事项.png

开源github分享

Wechat_small_program_Share 微信小程序分享? Github 欢迎 Star、Fork

结语

  • 本文主要讲解 小程序开发基础-scroll-view 可滚动视图区域
  • 下面我将继续对其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    达达前端
  • 微信小程序开发基础

    查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

    达达前端
  • 微信小程序新闻信息列表展示

    达达前端
  • 再过半小时,你就能明白kafka的工作原理了

    周末无聊刷着手机,某宝网APP突然蹦出来一条消息“为了回馈老客户,女朋友买一送一,活动仅限今天!”。买一送一还有这种好事,那我可不能错过!忍不住立马点了去。于是...

    Java团长
  • 微信小程序实践:2.3 可滚动的容器组件之 scroll-view

    说什么真理无穷,进一寸有一寸的欢喜。大家好,我是石桥码农,今天继续为大家分享微信小程序实践相关的技术内容。

    石桥码农
  • 微信小程序开发实战(1):容器组件

    本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动、滚动事件等,并通过例子代码来演示这些功能的使用方法。

    蒙娜丽宁
  • 微信小程序示例 - 视图容器

    滑块视图容器 swiper ? 代码结构 <swiper> <swiper-item> <image src="{{item}}"/> ...

    dys
  • 前端基础-HTML文字滚动

    scrollamount:滚动速度-----------------scroll:滚动 amount:数值

    cwl_java
  • 微信小程序如何获取组件实际高度

    viewscroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style...

    疯狂的小程序
  • uni-app中使用scroll-view滚到底部时多次触发scrolltolower

      前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几个展示的...

    追逐时光

扫码关注云+社区

领取腾讯云代金券