小程序模板网

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

2017-12-12 煤烟子

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

 
 
 

一.知识点 
可滚动视图区域 scroll-view

使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。

1.index.wxml

 

		
  1. [html] view plain copy CODE上查看代码片派生到我的代码片
  2. <view class="section">
  3. <view class="section__title">vertical scroll竖直方向</view>
  4. <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  5. <view id="green" class="scroll-view-item bc_green"></view>
  6. <view id="red" class="scroll-view-item bc_red"></view>
  7. <view id="yellow" class="scroll-view-item bc_yellow"></view>
  8. <view id="blue" class="scroll-view-item bc_blue"></view>
  9. </scroll-view>
  10. <view class="btn-area">
  11. <button size="mini" bindtap="tapMove">click me to scroll</button>
  12. </view>
  13. </view>

2.index.wxss

 

		
  1. [html] view plain copy CODE上查看代码片派生到我的代码片
  2. .scroll-view_H{
  3. white-space: nowrap;
  4. }
  5. .scroll-view-item{
  6. height: 200px;
  7. }
  8. .scroll-view-item_H{
  9. display: inline-block;
  10. width: 100%;
  11. height: 200px;
  12. }
  13. #green{
  14. background:green;
  15. }
  16. #red{
  17. background:red;
  18. }
  19. #yellow{
  20. background:yellow;
  21. }
  22. #blue{
  23. background:blue;
  24. }

index.js

 

		
  1. [html] view plain copy CODE上查看代码片派生到我的代码片
  2. <span style="font-family:Comic Sans MS;">var order = ['red', 'yellow', 'blue', 'green', 'red']
  3. Page({
  4. data: {
  5. toView: 'green',
  6. scrollTop: 100,
  7. scrollLeft: 0
  8. },
  9. //滚动条滚到顶部的时候触发
  10. upper: function(e) {
  11. console.log("顶部");
  12. },
  13. //滚动条滚到底部的时候触发
  14. lower: function(e) {
  15. console.log("底");
  16. },
  17. //滚动条滚动后触发
  18. scroll: function(e) {
  19. console.log("滚动");
  20. },
  21. //通过设置滚动条位置实现画面滚动
  22. tapMove: function(e) {
  23. this.setData({
  24. scrollTop: this.data.scrollTop + 10
  25. })
  26. }
  27. })
  28. </span>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18140.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询