微信小程序scroll-view,swiper设定屏幕高度

取高度值

onLoad:function(){
     var that = this;
    //  这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
    wx.getSystemInfo({
    success: function(res) {
      console.log(res.model)
      console.log(res.pixelRatio)
      console.log(res.windowWidth)
      console.log(res.windowHeight)
      that.setData({
          windowH:res.windowHeight-44
        });
      console.log(res.language)
      console.log(res.version)
      console.log(res.platform)
    }
    })
 },

设置高度值

<view class="container">
  <view class="select-bar">
    <block wx:for="{{barItems}}" wx:for-index="idx">
      <view class="select-bar-btn {{curruntPage == item.id ? 'active' : ''}}" bindtap="selectBarTap" data-id="{{item.id}}">
        {{item.title}}
      </view>
    </block>
  </view>
 <!--style="height:{{windowH}}px"-->
 <swiper class="scroll-view_O" indicator-dots="{{false}}" autoplay="{{false}}" bindchange="scrollOrder" current="{{curruntPage}}" style="height:{{windowH}}px">
 <!--style="height:{{windowH}}px;"-->
    <block wx:for="{{totalOrders}}"  wx:for-item="orders">
      <swiper-item class="order-type">
        <scroll-view class="order-type" scroll-y="true">
            <block wx:for="{{orders}}" wx:for-item="item">
            <navigator url="url" hover-class="navigator-hover">
              <view class="order-cell">
                <view class="order-cell-line addline">
                  <view class="status">待支付</view>
                  <view class="payBtn">立即支付</view>
                </view>
                <view class="order-cell-line">
                  <view class="hotel">杭州大酒店</view>
                  <view class="price">¥120</view>
                </view>
                <view class="order-cell-line">
                  <view class="time">2016-02-10至2016-02-13</view>
                </view>
                <view class="order-cell-line">
                  <view class="content">1间 1晚 标准双人床-不含早</view>
                  <view class="source">携程代理</view>
                </view>
              </view>
              </navigator>
            </block>
          </scroll-view>
      </swiper-item>
    </block>
  </swiper>

</view>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容