鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 微信小程序：上下左右都可滑動(dòng)的布局

微信小程序：上下左右都可滑動(dòng)的布局

圖片描述

描述：

  • 如圖所示，黑色框?yàn)槠聊唬?/li>
  • 紫色框可以上下滑動(dòng)，且上下滑動(dòng)，滑動(dòng)時(shí)綠色部分固定在最頂端，紫色框內(nèi)類似 html 里的表格（小程序沒有表格標(biāo)簽），
  • 粉色部分可左右滑動(dòng)，且滑動(dòng)時(shí)藍(lán)色部分固定，綠色部分需跟隨粉色部分滑動(dòng)

我的代碼

我的解決方法是一個(gè)y軸方向的scroll-view里面嵌套一個(gè)x軸方向的scroll-view，綠色部分絕對定位，top值動(dòng)態(tài)修改。

  <!-- 紫色框，可上下滑動(dòng)的 scroll-view-->
  <scroll-view class="quotation-wrapper" style="height:{{wHeight}}px;" scroll-y="true" bindscroll="scroll" bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower">

    <!-- 藍(lán)色部分-固定 -->
    <view class="left-wrapper">
      <view class="left-th" style="{{leftThStyle}}">名稱</view>
      <view wx:for="{{text}}" wx:key="{{item.rank}}">
        <view class="left-item"><view class="rank">{{item.rank}}</view>{{item.symbol}}</view>
      </view>
    </view>

    <!-- 粉色部分，可左右滑動(dòng)的 scroll-view -->
    <scroll-view class="right-wrapper" scroll-x="true">
      <view class="right-th" style="{{thStyle}}">
        <view class="right-td">流通市值</view>
        <view class="right-td">價(jià)格</view>
        <view class="right-td">流通數(shù)量</view>
        <view class="right-td">成交額</view>
        <view class="right-td">漲幅(24h)</view>
        <view class="right-td">漲幅(7d)</view>
      </view>
      <block wx:for="{{text}}" wx:key="{{item.rank}}">
        <view class="right-item">
          <view class="right-item-prop">{{filter.format8(item.marketCapType)}}</view>
          <view class="right-item-prop">{{filter.formatUndefined(item.priceType)}}</view>
          <view class="right-item-prop">{{filter.format4(item.availableSupply)}}</view>
          <view class="right-item-prop">{{filter.format4(item.data24hVolumeType)}}</view>

          <view wx:if="{{item.percentChange24h > 0}}" class="right-item-prop" style="color:green;">+{{item.percentChange24h}}</view>
          <view wx:if="{{item.percentChange24h < 0}}" class="right-item-prop" style="color:red;">{{item.percentChange24h}}</view>

          <view wx:if="{{item.percentChange7d > 0}}" class="right-item-prop" style="color:green;">+{{item.percentChange7d}}</view>
          <view wx:if="{{item.percentChange7d < 0}}" class="right-item-prop" style="color:red;">{{item.percentChange7d}}</view>
        </view>
      </block>
    </scroll-view>
  </scroll-view>
Page({
  data: {
    text: quotationList,
    wHeight: 0,
    thStyle: 'position: absolute;top: 0;left: 0;'
   },
  onLoad: function() {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          // 設(shè)置紫色框 scroll-view 的高度
          wHeight: (res.windowHeight - 40)
        })
      }
    })
  },
  //滾動(dòng)過程中觸發(fā)，設(shè)置 top 值為 scrollTop 值
  scroll: function(e) {
    this.setData({
      thStyle: 'position: absolute;top:' + e.detail.scrollTop + 'px;left: 0;',
      leftThStyle: 'position: absolute;top:' + e.detail.scrollTop + 'px;left: 0;'
    })
  }
})

效果圖：

圖片描述

出現(xiàn)的問題：

由于綠色部分（表頭）定位的top值是上下滑動(dòng)時(shí)使用setData來改變的，所以會(huì)一直觸發(fā)setData，造成滑動(dòng)卡頓不流暢。
想問問有沒有好一些的解決辦法。不局限于這個(gè)布局，更改布局能實(shí)現(xiàn)相同的效果也是可以的。
感謝！！

2018-07-19更新

這個(gè)問題最終沒有解決。
考慮到這個(gè)布局比較復(fù)雜，后續(xù)可能不好維護(hù)，和小程序輕量的定位，所以換了另外一種普通的方式來展示數(shù)據(jù)。
樓主已經(jīng)換了公司，后續(xù)來的同學(xué)不用再浪費(fèi)時(shí)間跟我要代碼了，就這樣。

回答
編輯回答
逗婦乳

Hi 你好，你這個(gè)個(gè)小程序做出來的左右都有滾動(dòng)的布局表格的源碼可以分享參考一下嗎？謝謝 29217321@qq.com

2017年6月11日 15:45
編輯回答
蝶戀花

你好,你可以把代碼發(fā)給我一份嗎,我學(xué)習(xí)一下,752495329@qq.com,萬分感謝!

2018年7月27日 19:54
編輯回答
大濕胸

你好,你可以把代碼發(fā)給我一份嗎,我學(xué)習(xí)一下,982725015@qq.com,萬分感謝!

2018年3月9日 10:45
編輯回答
離魂曲

你好，可以把您的代碼完整發(fā)給我一份，我研究一下，767461465@qq.com,謝謝您了

2018年2月8日 13:01
編輯回答
扯不斷

可不可以把你這塊所有的代碼都粘貼出來研究一下

2017年9月2日 19:38
編輯回答
兮顏

感覺不需要那么麻煩，我直接用css寫一下

<view class="top">111</view>
<view class="wrapper">
    <view class="main">
        <view class="left">
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
            <view class="line">1</view>
        </view>
        <view class="right">
            <view class="right-wrapper">
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
                <view class="line">123456789123456789123456789123456789123456789123456789123456789123456789123456789</view>
            </view>
        </view>
    </view>
</view>

.top{
    position: fixed;
    background: aquamarine;
    top: 0;
    left: 0;
    right: 0;
    height: 50rpx;
    text-align: center;
    z-index: 1;
}
.wrapper{
    padding-top: 50rpx;
    width: 750rpx;
    overflow-x: hidden;
    position: relative;
}

.left{
    position: absolute;
    width: 100rpx;
}
.right{
    padding-left: 100rpx;
    width: 650rpx;
}
.right-wrapper{
    width: 1000rpx;
    overflow-x: auto;
}
2018年9月9日 17:40