微信小程序开发—(十三)可滚动视图区域 scroll-view

最新推荐文章于 2024-08-14 09:00:32 发布

面条请不要欺负汉堡

最新推荐文章于 2024-08-14 09:00:32 发布

阅读量7.5k

点赞数 1

分类专栏：微信小程序开发文章标签：微信小程序可滚动视图区域滚动视图区域 scroll-view 小程序无限滚动

本文链接：https://blog.csdn.net/gao_xu_520/article/details/72235947

版权

微信小程序开发专栏收录该内容

42 篇文章 9 订阅

订阅专栏

一.知识点

可滚动视图区域 scroll-view

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

1.index.wxml

<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="tapMove">click me to scroll</button>
  </view>
</view>

2.index.wxss

.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
#green{
	background:green;
}
#red{
	background:red;
}
#yellow{
	background:yellow;
}
#blue{
	background:blue;
}

index.js

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
  //滚动条滚到顶部的时候触发
  upper: function(e) {
    console.log("顶部");
  },
  //滚动条滚到底部的时候触发
  lower: function(e) {
    console.log("底");
  },
  //滚动条滚动后触发
  scroll: function(e) {
    console.log("滚动");
  },
  //通过设置滚动条位置实现画面滚动
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})