小程序模板網

微信小程序開發(fā)—可滾動視圖區(qū)域 scroll-view

發(fā)布時間:2017-12-12 17:32 所屬欄目:小程序開發(fā)教程

微信小程序開發(fā)—可滾動視圖區(qū)域 scroll-view

 
 
 

一.知識點 
可滾動視圖區(qū)域 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. //滾動條滾到頂部的時候觸發(fā)
  10. upper: function(e) {
  11. console.log("頂部");
  12. },
  13. //滾動條滾到底部的時候觸發(fā)
  14. lower: function(e) {
  15. console.log("底");
  16. },
  17. //滾動條滾動后觸發(fā)
  18. scroll: function(e) {
  19. console.log("滾動");
  20. },
  21. //通過設置滾動條位置實現(xiàn)畫面滾動
  22. tapMove: function(e) {
  23. this.setData({
  24. scrollTop: this.data.scrollTop + 10
  25. })
  26. }
  27. })
  28. </span>


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18140.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢