WeChat Mini Programs: a layout that can be slid up and down, left and right.

:

  • html

yscroll-viewxscroll-viewtop

:

problems:

because the top value of the green part (header) is changed using setData when sliding up and down, it will always trigger setData , causing the sliding stutter to be not smooth.
would like to ask if there is a better solution. Not limited to this layout, it is also possible to change the layout to achieve the same effect.
Thank you!

2018-07-19 Update

the problem was not solved in the end.
considering that the layout is complex, it may be difficult to maintain in the future, and Mini Program"s lightweight positioning, so another common way to display data.
the landlord has changed the company, and the follow-up students don"t have to waste any more time asking me for the code, that"s all.

Mini-Program layout form
Jul.06,2021

I don't feel so troublesome. I'll write

directly in 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;
}

can you paste all your code out and study

style of sliding up
wxml 

<view class="top">111</view>
<view class="wrapper">
            <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>

wxss 

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

Hi Hello, can you share the source code of the scrolling layout table made by Mini Program? Thank you 29217321@qq.com

Hello, can you send me a copy of the code, I will study it, 752495329roomqq.com, thank you very much!

Hello, you can send me a complete copy of your code, and I'll study it. 767461465roomqq.com, thank you

Hello, can you send me a copy of the code, I will study it, 982725015roomqq.com, thank you very much!

Previous: JS page DIV scrolling jump problem, find a master to solve

Next: Configuration and use of Spring @ Async annotations

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-42b47a1-66c6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-42b47a1-66c6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?