微信小程序学习记录-视图容器

看代码注释即可

    

1. view
   view很简单类似于div
2. scroll-view
   可滚动的view 下面代码展示了部分属性与绑定方法
   

   test.js

     scrollToUpper: function(event){
       console.log("拉到最上面，可以做刷新操作。")
       console.log(event)
     },
     scrollToLower:function(event){
       console.log("拉到最下面，可向后台发请求做分页显示。")
       console.log(event)
     },
     bindScroll: function(event){
       // console.log(event)
     },
     click:function(){
       // 用这个属性来动态的控制srocllview的纵向滚动条
       this.setData({ scrolltop: this.data.scrolltop + 10})
       console.log('click ...')
     },
     //这个方法用来跳到scrollview的某个id为red对应的子view
     scrollintoview: function(){
       this.setData({ scrollintoview: "red" })
     }

   test.wxml

   <!--pages/test/test.wxml-->
   <view class='container'>
   <!--lower-threshold  lower-threshold 是具体到差多少像素触发 bindscrolltoupper 与 bindscrolltolower方法-->
     <scroll-view scroll-y style="height: 200px;" class='isv' bindscrolltoupper='scrollToUpper'
     bindscrolltolower='scrollToLower' bindscroll='bindScroll' upper-threshold='10px' lower-threshold='10px' scroll-top="{{scrolltop}}" scroll-into-view="{{scrollintoview}}">
         <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>
   
     <button bindtap='click'>click</button>
     <button bindtap='scrollintoview'>scrollintoview</button>
   
   </view>

   test.wxss

   /* pages/test/test.wxss */
   .container{
     padding: 20rpx;
   }
   
   .isv{
     /* margin-top: 50rpx; */
     margin-top: 50px;
   
   }
   
   .bc_green{
     background-color: green;
     width: 100%;
     height: 200rpx;
   }
   .bc_red{
     background-color: red;
     width: 100%;
     height: 200rpx;
   }
   .bc_yellow{
     background-color: yellow;
     width: 100%;
     height: 200rpx;
   }
   .bc_blue{
     background-color: blue;
     width: 100%;
     height: 200rpx;
   }

3. swiper
   滑块容器，可用作图片轮播，很简单可以参考文档。