文档章节

微信小程序_(视图)简单的scroll-view容器

o
 osc_4nmshwhm
发布于 2018/08/06 22:41
字数 1070
阅读 13
收藏 0
red

精选30+云产品,助力企业轻松上云!>>>

 

 

scroll-view容器效果  官方文档:传送门

 

 

  

scroll-view  可滚动视图区域

scroll-x    Boolean    false    允许横向滚动
scroll-y    Boolean    false    允许纵向滚动
upper-threshold    Number    50    距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-threshold    Number    50    距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-top    Number        设置竖向滚动条位置
scroll-left    Number        设置横向滚动条位置
scroll-into-view    String        值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation    Boolean    false    在设置滚动条位置时使用动画过渡
enable-back-to-top    Boolean    false    iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupper    EventHandle        滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower    EventHandle        滚动到底部/右边,会触发 scrolltolower 事件
bindscroll    EventHandle        滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
官方文档:scroll-view

 

 滑动滚动条,下方文本会显示滚动条的状态(到达最上方/滚动中/到达最下方),控制台输出滚动条状态

    

 

程序结构

  

 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    texts:"滚动条状态"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },

  upper: function(event) {
    this.setData({ texts: "滚动条到 最上方 了"});
  },

  lower: function(event) {
    this.setData({ texts: "滚动条到 最下方 了" });
  },

  sroll: function(event) {
    this.setData({ texts: "滚动条 滚动 了" });
    console.log("我在滚动");
    console.log(event);
  }
})
test.js

 

Gary 微信小程序
<scroll-view style="height:200px;" scroll-y="true"
     bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="sroll">
    <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>
<text>{{texts}}</text>
test.wxml

 

/* pages/test/test.wxss */
.scroll-view{
  white-space: nowrap;
}

.scroll-view-item{
  height:200px;
}

.bc_green{
  background-color: green;
}

.bc_red{
  background-color: red;
}

.bc_yellow{
  background-color: yellow;
}

.bc_blue{
  background-color: blue;
}
test.wxss

 

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
app.json

 

实现过程

 

  添加滚动容器属性

scroll-view     容器
style="height:200px;"     设置容器高度
scroll-y="true"                设置容器为纵向
bindscrolltoupper="upper"     
滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower="lower" 
滚动到底部/右边,会触发 scrolltolower 事件
bindscroll="sroll" 
滚动时触发,会触发sroll事件

 

  添加视图进入可滚动区域

<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>

 

  添加绑定滚动条滚动时的事件

  upper: function(event) {
    this.setData({ texts: "滚动条到 最上方 了"});
  },

  lower: function(event) {
    this.setData({ texts: "滚动条到 最下方 了" });
  },

  sroll: function(event) {
    this.setData({ texts: "滚动条 滚动 了" });
    console.log("我在滚动");
    console.log(event);
  },

 

  左右方向滚动条改变为上下方向方向滚动条只需要改变scroll-x/scroll-y属性

 

.bc_green{
  background-color: green;
}

.bc_red{
  background-color: red;
}

.bc_yellow{
  background-color: yellow;
}

.bc_blue{
  background-color: blue;
}

  wxss同css样式,将颜色作为背景添加到View中,将View添加到滚动视图中

 

 

点击"按钮"改变滚动条位置效果

 

 

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  },
  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
    })
  }
})
test.js

 

Gary 微信小程序
<scroll-view style="height:200px;" scroll-y="true"
     bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="sroll" 
     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>

 <button size="mini" bindtap="tap">click me to scroll into view </button>
test.wxml

 

/* pages/test/test.wxss */
.scroll-view{
  white-space: nowrap;
}

.scroll-view-item{
  height:200px;
}

.bc_green{
  background-color: green;
}

.bc_red{
  background-color: red;
}

.bc_yellow{
  background-color: yellow;
}

.bc_blue{
  background-color: blue;
}

test.wxss
test.wxss

 

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
app.json

 

 

实现过程

 

  设置滚动条要滚动到的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
      }
    }
  },

 

   改变滚动条位置,显示出不同View视图

  tapMove: function (e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }

 

 

 

官方文档  传送门

scroll-top    Number        设置竖向滚动条位置
scroll-left    Number        设置横向滚动条位置

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
微信小程序scroll-view组件用法集合,包括各种问题和教程

微信小程序scroll-view组件用法集合,包括各种问题和教程,在微信小程序开发过程中,对于使用scroll-view组件有一定参考价值。 scroll-view组件介绍: 可滚动视图区域,属性如下: tip: 请勿...

osc_a7rsiqz6
2018/05/23
51
0
微信小程序开发- 3 - 原生组件(一)

微信小程序基础到进阶(共6节) 微信小程序开发-开发流程和开发基础 - 1 微信小程序开发-2- 生命周期、事件、原生组件 微信小程序开发- 3 - 原生组件(一)") 微信小程序开发- 4 - 原生API 微信小...

droden
02/13
749
0
微信小程序_基础组件大全

微信小程序_基础组件 微信小程序为小程序开发者提供了一系列小程序基础组件,开发者可以通过组合这些小程序基础组件进行微信小程序的快速开发。 微信小程序组件是什么?微信小程序组件怎么用...

百度小程序
2018/11/12
0
0
图解微信小程序---scroll_view实现首页排行榜布局

图解微信小程序---scroll_view实现首页排行榜布局 什么是scroll-view? 滚动视图 可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单...

osc_2snvc4af
2019/09/29
1
0
微信小程序实现纵向滚动块--scroll-view

一、微信小程序scroll-view 设置可滚动视图区域 1.由于手机的宽度比较窄,出现横向滚动的需要很常见 2.scrool-y,设置区域可以纵向滚动 3.scrool-into-view ,设置滚动到指定的id 处,在搜索页...

tianma3798
2018/08/24
2.9K
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式(4) 建造者模式

什么是建造者模式 经典建造者模式的优缺点 对建造者模式的扩展 什么是建造者模式 建造者模式将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。创建者模式隐藏了...

zhixin9001
24分钟前
14
0
ArrayList源码分析 —— JDK8

ArrayList的特性 ArrayList内部使用数据作为存储结构,ArrayList可以理解为数组的扩展对象,封装了常用的和非常用的操作数组的方法。以及当数组长度不足以保存数组时,自动扩容数组,通常Arr...

XuePeng77
30分钟前
32
0
__slots__的用法? - Usage of __slots__?

问题: Python中__slots__的目的是什么-尤其是关于何时以及何时不使用它的目的? 解决方案: 参考一: https://stackoom.com/question/1ymu/slots-的用法 参考二: https://oldbug.net/q/1ym...

富含淀粉
41分钟前
17
0
Python分析42年高考数据,告诉你高考为什么这么难?

作者:徐麟 历年录取率 可能很多经历过高考的人都不知道高考的全称,高考实际上是普通高等学校招生全国统一考试的简称。从1977年国家恢复高考制度至今,高考经历了许多的改革,其中最为显著的...

爱码小哥
43分钟前
19
0
CKEditor 5 + SpringBoot实战(四):SpringBoot 实现文件上传

在本系列的文章中,我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringData JPA数据持久化,CKEditor5的安装,CKEditor图片上传,...

树下魅狐
45分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部