小程序滾動(dòng)界面

最近要用到小程序排一個(gè)這樣的界面圖片描述

左邊的分類(lèi)和右邊的商品分別是scroll-view,但是排出來(lái)之后兩個(gè)scroll-view之間有影響，大概說(shuō)就是滾動(dòng)其中一個(gè)的時(shí)候另外一個(gè)也動(dòng)。
有人排過(guò)這樣的頁(yè)面嗎？求指教。。。。。。。

回答

編輯回答

掛念你

如果網(wǎng)頁(yè)的話(huà)可以根據(jù)右側(cè)的scrollTop來(lái)動(dòng)態(tài)添加class 但是小程序上似乎沒(méi)辦法得到這些數(shù)值。。。。
我看美團(tuán)外賣(mài)和餓了么的小程序也都沒(méi)有實(shí)現(xiàn)這種效果

2017年1月14日 04:55

編輯回答

逗婦惱

這是布局的基本問(wèn)題，直接貼代碼了

<view class="top">頂部</view>
<view class="content">
  <view class="left-menu">
    <scroll-view style='height:{{height-50}}px' scroll-y>
      <view class="menu-item" wx:for="{{menuArr}}">{{item}}</view>
    </scroll-view>
  </view>
  <view class="right-con">
    <scroll-view style='height:{{height-50}}px' scroll-y>
      <view class="con-item" wx:for="{{menuArr}}">{{item}}</view>
    </scroll-view>
  </view>
</view>

.top{
  width: 100%;
  height: 50px;
  background: #333;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
.content{
  position: relative;
}
.left-menu{
  width: 30%;
  float: left;
}
.right-con{
  width: 70%;
  float: right;
}
.menu-item{
  line-height: 90rpx;
  border-bottom: 1px solid #dbdbdb;
  background: #f5f5f5;
}
.con-item{
    line-height: 200rpx;
    border-bottom: 1px solid #666;
    background: #f5f5f5;
}

設(shè)置scroll-view高度

  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          height:res.windowHeight
        })
      },
    })
  }