鍍金池/ 問答/HTML5  PHP  HTML/ 小程序滾動(dòng)界面

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

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

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

回答
編輯回答
掛念你

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

2017年1月14日 04:55
編輯回答
逗婦惱

這是布局的基本問題，直接貼代碼了

<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
        })
      },
    })
  }
代碼僅供參考

效果圖

圖片描述

真機(jī)測(cè)試也沒問題

2018年3月17日 08:33