码迷,mamicode.com
首页 > 其他好文 > 详细

探秘小程序(8):scroll-view组件

时间:2018-05-17 00:04:43      阅读:42      评论:0      收藏:0      [点我收藏+]

标签:样式   说明   play   int   function   数据   isp   ola   没有   

按照官方文档的例子已经多scroll-view进行了说明,但是案例中没有样式 到时会出现一些问题,比如说,自己写的scroll-x并不能横向滚动,今天就来说一下这个问题:

DEMO如下:

html:

<view class=‘section‘>
  <view class=‘section_title‘>verticle scroll</view>
  <scroll-view scroll-y 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="tap">click me to scroll into view</button>
    <button size="mini" bindtap=‘tapMove‘>click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view scroll-x=‘true‘  class="scroll-view_H" style="width: 100%;">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

 

js:

var order = [‘red‘,‘yellow‘,‘blue‘,‘green‘,‘red‘]
Page({

  /**
   * 页面的初始数据
   */
  data: {
    toView:‘red‘,
    scrollTop:100
  },
  upper:function(e){
    console.log(‘upper‘,e);
  },
  lower:function(e){
    console.log(‘lower‘,e);
  },
  scroll:function(e){
    console.log(e);
  },
  tap:function(e){
    for(var i =0;i<order.length;i++){
      if(order[i] === this.data.toView){
        this.setData({
          toView:order[i+1]
        })
        break;
      }
    }
  },
  tapMove:function(e){
    this.setData({
      scrollTop:this.data.scrollTop + 10
    })
  }
})

 

css:

/* pages/scrollView/scrollView.wxss */
.bc_green{
  background-color: green;
}
.bc_red{
  background-color: red;
}
.bc_yellow{
  background-color: yellow;
}
.bc_blue{
  background-color: blue;
}
.scroll-view-item{
  width: 300px;
  height: 100px;
}
.scroll-view-item_H{
  width: 50%;  
  height: 220rpx;  
  display: inline-block;  
  text-align: center;  
  margin: 0 auto;  
}
.scroll-view_H{
  width: 100%;  
  overflow: hidden;  
  white-space: nowrap;  
  height: 220rpx;  
}

重点:

.scroll-view-item_H{
width: 50%;
height: 220rpx;
display: inline-block;
text-align: center;
margin: 0 auto;
}
.scroll-view_H{
width: 100%;
overflow: hidden;
white-space: nowrap;
height: 220rpx;
}
同时如果给横向滚动中的元素设置了display:flex或者float-left这些横向滚动都不会生效。请小伙伴们注意啦!
 

探秘小程序(8):scroll-view组件

标签:样式   说明   play   int   function   数据   isp   ola   没有   

原文地址:https://www.cnblogs.com/codeww/p/9048715.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!