微信小程序_(組件)scroll-view可滾動視圖

時間  2019-11-29
標籤 微信 程序 組件 scroll view 滾動 視圖 简体版
原文   原文鏈接

 

 

　　微信小程序scroll-view組件官方文檔　　傳送門html

 

　　提早準備：使用<view>組件製做五條撐滿的橫向區域web

 

<!--index.wxml-->
Cynical丶Gary
<view >
  
  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a  -->
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>
</view>
index.wxml

 

.container{
  display: flex;

}

.size{
  width: 100%;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}
index.wxss

 

　　Learn小程序

　　　　1、scroll-y屬性微信小程序

　　　　2、scroll-x屬性微信

　　　　 

 

1、scroll-y屬性xss

　　scroll-y：容許縱向滾動【默認值false】ide

　　使用<scroll-view>組件能夠設置小程序中<view>組件縱向滾動，使用<scroll-view>組件時注意必須設置高度的樣式如：style='height:300rpx'函數

 

<!--index.wxml-->
Cynical丶Gary
<scroll-view scroll-y="true" style='height:300rpx'>

  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a  -->
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</scroll-view>
index.wxml

 

.container{
  display: flex;

}

.size{
  width: 100%;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}
index.wxss

 

　　upper-threshold：距頂部/左邊多遠時（單位px，2.4.0起支持rpx），觸發 scrolltoupper 事件【默認值50】工具

　　lower-threshold：距底部/右邊多遠時（單位px，2.4.0起支持rpx），觸發 scrolltolower 事件【默認值50】開發工具

　　bindscrolltoupper：滾動到頂部/左邊，會觸發 scrolltoupper 事件

　　bindscrolltolower：滾動到底部/右邊，會觸發 scrolltolower 事件

　　給<scroller-view>組件添加滾動觸發事件

<scroll-view scroll-y="true" style='height:300rpx;'　　bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" >

　　並在index.js中添加scrolltoupper函數事件和scrolltolower函數事件

  scrolltoupper:function(){
      console.log("滾動到頂部");
  },
  scrolltolower:function(){
    console.log("滾動到底部");
  }

 

 

<!--index.wxml-->
Cynical丶Gary
<scroll-view scroll-y="true" style='height:300rpx;'
bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" >

  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a  -->
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</scroll-view>
index.wxml

 

.container{
  display: flex;

}

.size{
  width: 100%;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}
index.wxss

 

Page({
  data:{

  },

  scrolltoupper:function(){
      console.log("滾動到頂部");
  },
  scrolltolower:function(){
    console.log("滾動到底部");
  }

})
index.js

 

　　固然咱們也能夠給<scroll-view>添加兩個額外的屬性upper-threshold和lower-threshold

　　upper-threshold：距頂部/左邊多遠時（單位px，2.4.0起支持rpx），觸發 scrolltoupper 事件【默認值50】

　　lower-threshold：距底部/右邊多遠時（單位px，2.4.0起支持rpx），觸發 scrolltolower 事件【默認值50】

　　使用方法

<scroll-view scroll-y="true" style='height:300rpx;'
bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" upper-threshold="0" lower-threshold="0">

 

 

　　scroll-top：設置豎向滾動條位置（單位px，2.4.0起支持rpx）【無默認值】

　　能夠看到，當咱們設置scroll-top="100"時，滾動條默認出如今距離頂部100px位置的地方，當咱們設置scroll-top="150"時，滾動條默認出如今距離頂部150px位置的地方

 

<!--index.wxml-->
Cynical丶Gary
<scroll-view scroll-y="true" style='height:300rpx;'
bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" 
upper-threshold="0"
lower-threshold="0"
scroll-top="150">

  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a  -->
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</scroll-view>
index.wxml

 

.container{
  display: flex;

}

.size{
  width: 100%;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}
index.wxss

 

Page({
  data:{

  },

  scrolltoupper:function(){
      console.log("滾動到頂部");
  },
  scrolltolower:function(){
    console.log("滾動到底部");
  }

})
index.js

 

　　enable-back-to-top：iOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向【默認值false】

　　注意：微信小程序開發工具中默認在web環境中進行開發，而此屬性須要在手機上運行~

　　bindscroll：滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

　　在index.js中添加滾動時觸發的函數bindscroll()

  bindscroll:function(){
    console.log("滾動中~");
  }

　　在index.wxml中進行事件綁定bindscroll="bindscroll"

　　<scroll-view scroll-y="true" style='height:300rpx;'
　　bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" 
　　upper-threshold="0"
　　lower-threshold="0"
　　scroll-top="150"
　　enable-back-to-top="true"
　　bindscroll="bindscroll">

 

 

<!--index.wxml-->
Cynical丶Gary
<scroll-view scroll-y="true" style='height:300rpx;'
bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" 
upper-threshold="0"
lower-threshold="0"
scroll-top="150"
enable-back-to-top="true"
bindscroll="bindscroll">

  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a  -->
  <view class='a size'>a</view>
  <view class='b size'>b</view>
  <view class='c size'>c</view>
  <view class='d size'>d</view>
  <view class='e size'>e</view>

</scroll-view>
index.wxml

 

Page({
  data:{

  },

  scrolltoupper:function(){
      console.log("滾動到頂部");
  },
  scrolltolower:function(){
    console.log("滾動到底部");
  },
  bindscroll:function(){
    console.log("滾動中~");
  }


})
index.js

　　

　　scroll-into-view：值應爲某子元素id（id不能以數字開頭）。設置哪一個方向可滾動，則在哪一個方向滾動到該元素

　　index.wxml中給五個<view>組件添加id元素

  <view id="a" class='a size'>a</view>
  <view id="b" class='b size'>b</view>
  <view id="c" class='c size'>c</view>
  <view id="d" class='d size'>d</view>
  <view id="e" class='e size'>e</view>

 

 

　　經過scroll-into-view給<scroll-view>組件添加屬性

　　<scroll-view scroll-y="true" style='height:300rpx;'
　　bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" 
　　upper-threshold="0"
　　lower-threshold="0"
　　scroll-into-view="e"
　　enable-back-to-top="true"
　　bindscroll="bindscroll">

 

 

<!--index.wxml-->
Cynical丶Gary
<!-- scroll-top="150" -->
<scroll-view scroll-y="true" style='height:300rpx;'
bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" 
upper-threshold="0"
lower-threshold="0"
scroll-into-view="e"
enable-back-to-top="true"
bindscroll="bindscroll">

  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a  -->
  <view id="a" class='a size'>a</view>
  <view id="b" class='b size'>b</view>
  <view id="c" class='c size'>c</view>
  <view id="d" class='d size'>d</view>
  <view id="e" class='e size'>e</view>

</scroll-view>
index.wxml

 

Page({
  data:{

  },

  scrolltoupper:function(){
      console.log("滾動到頂部");
  },
  scrolltolower:function(){
    console.log("滾動到底部");
  },
  bindscroll:function(){
    console.log("滾動中~");
  }


})
index.js

 

 

2、scroll-x屬性

　　scroll-x：容許橫向滾動【默認值爲false】

　　scroll-left：設置橫向滾動條位置（單位px，2.4.0起支持rpx）

 

<!--index.wxml-->
Cynical丶Gary
<scroll-view class='container' scroll-x="true" style='height:300rpx;'
scroll-left="200">
  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a  -->
  <view id="a" class='a size'>a</view>
  <view id="b" class='b size'>b</view>
  <view id="c" class='c size'>c</view>
  <view id="d" class='d size'>d</view>
  <view id="e" class='e size'>e</view>
</scroll-view>
index.wxml

 

.container{
  display: flex;
  white-space: nowrap;
}

.size{
  width: 250rpx;
  height: 150rpx;
  display:inline-block;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}
index.wxss

 

Page({
  data:{

  },

  scrolltoupper:function(){
      console.log("滾動到頂部");
  },
  scrolltolower:function(){
    console.log("滾動到底部");
  },
  bindscroll:function(){
    console.log("滾動中~");
  }


})
index.js
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程