微信小程序 教程之wxapp视图容器 scroll-view

相关文章：

  1. 微信小程序 教程之wxapp视图容器 swiper
  2. 微信小程序 教程之wxapp视图容器 scroll-view
  3. 微信小程序 教程之wxapp 视图容器 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，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper EventHandle   滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle   滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle   滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

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

示例代码：

<view class="section">
 <view class="section__title">vertical scroll</view>
 <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>
</view>
<view class="section section_gap">
 <view class="section__title">horizontal scroll</view>
 <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
 <view id="green" class="scroll-view-item_H bc_green"></view>
 <view id="red" class="scroll-view-item_H bc_red"></view>
 <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
 <view id="blue" class="scroll-view-item_H bc_blue"></view>
 </scroll-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
 })
 }
})
scroll-view

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

  • 微信小程序（九）scroll-view组件详细介绍

    微信小程序（九）scroll-view组件详细介绍

    scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块 主要属性: 使用演示: wxml <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style="height: 200px"> <view style="background: r

  • 微信小程序 scroll-view组件实现列表页实例代码

    scroll-view组件介绍 scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧! 为app导入新page页面 首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置文件在里面的pages数组添加"pages/allJoke/allJoke"然后设置底部导航在"tabBar"的列表项("lis

  • 微信小程序 scroll-view隐藏滚动条详解

    微信小程序 scroll-view隐藏滚动条详解

    一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事

  • 微信小程序scroll-view实现横向滚动和上拉加载示例

    微信小程序scroll-view实现横向滚动和上拉加载示例

    今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

  • 微信小程序 教程之wxapp视图容器 swiper

    相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view 微信小程序视图容器:swiper ​滑动面板 ​滑动面板 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 current Number 0 当前所在页面的index interval Number 5000

  • 微信小程序 教程之wxapp视图容器 scroll-view

    微信小程序 教程之wxapp视图容器 scroll-view

    相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view scroll-view 可滚动视图区域. 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower

  • 微信小程序 教程之wxapp 视图容器 view

    微信小程序 教程之wxapp 视图容器 view

    相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view View 视图容器. 示例: <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp"

  • 微信小程序 教程之WXML

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 用以下一些简单的例子来看看WXML具有什么能力: 数据绑定 <!--wxml--> <text> {{message}

  • 微信小程序 开发之滑块视图容器(swiper)详解及实例代码

    微信小程序 开发之滑块视图容器(swiper)详解及实例代码

    微信小程序 开发之滑块视图容器详解 实现效果图: 实现起来特别简单,看看代码是怎么写的呢: <swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="

  • 微信小程序 教程之WXSS

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXSS WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式. WXSS用来决定WXML的组件应该怎么显示. 为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性. 同时为了更适合开发微信小程序,我们对CSS进行

  • 微信小程序之导航滑块视图容器功能的实现代码(简单两步)

    先看效果图: 这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换. 实现步骤: 编写滑块视图代码 编写逻辑代码 wxml: <view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="sw

  • 微信小程序移动拖拽视图-movable-view实例详解

    JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT

  • 微信小程序教程系列之视图层的条件渲染（10）

    微信小程序教程系列之视图层的条件渲染（10）

    本教程为大家分享了使用wx:if进行视图层的条件渲染,供大家参考,具体内容如下 使用wx:if进行视图层的条件渲染 示例: wxml:使用view <!--index.wxml--> <button bindtap="EventHandle">按钮</button> <!-- wx:if --> <view wx:if="{{boolean==true}}"> <view class="bg

  • 微信小程序实现YDUI的ScrollNav组件

    微信小程序实现YDUI的ScrollNav组件

    本文实例为大家分享了微信小程序实现滚动导航效果的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 实现原理 采用双 scroll-view 组件实现双滚动! WXML <!--导航滚动 --> <scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="t

随机推荐