WeChat Mini Programs: a layout that can be slid up and down, left and right. - Codes Helper - Programming Question Answer

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

Menu