原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）

忘是亡心i 2022-12-03 02:21 333阅读 0赞

## 原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动） ##

![在这里插入图片描述][20200901151320677.gif_pic_center]

**这个会简单很多**  
**结构层**

<view class="container">
      
      
      
      <scroll-view scroll-y="true" class="left">
        <view>1</view>
        <view>2</view>
        <view>3</view>
        <view>4</view>
        <view>5</view>
        <view>6</view>
        <view>7</view>
        <view>8</view>
        <view>9</view>
        <view>10</view>
        <view>11</view>
        <view>12</view>
        <view>13</view>
        <view>14</view>
        <view>15</view>
        <view>16</view>
        <view>17</view>
        <view>18</view>
        <view>19</view>
        <view>20</view>
        <view>21</view>
        <view>22</view>
        <view>23</view>
        <view>24</view>
        <view>25</view>
        <view>26</view>
        <view>27</view>
        <view>28</view>
        <view>29</view>
        <view>30</view>
        <view>31</view>
        <view>32</view>
        <view>33</view>
        <view>34</view>
        <view>35</view>
        <view>36</view>
        <view>37</view>
        <view>38</view>
        <view>39</view>
        <view>40</view>
        <view>41</view>
        <view>42</view>
        <view>43</view>
        <view>44</view>
        <view>45</view>
        <view>46</view>
        <view>47</view>
        <view>48</view>
        <view>49</view>
        <view>50</view>
        <view>51</view>
        <view>52</view>
        <view>53</view>
        <view>54</view>
        <view>55</view>
        <view>56</view>
        <view>57</view>
        <view>58</view>
        <view>59</view>
        <view>60</view>
        <view>61</view>
        <view>62</view>
        <view>63</view>
        <view>64</view>
        <view>65</view>
        <view>66</view>
        <view>67</view>
        <view>68</view>
        <view>69</view>
        <view>70</view>
        <view>71</view>
        <view>72</view>
        <view>73</view>
        <view>74</view>
        <view>75</view>
        <view>76</view>
        <view>77</view>
        <view>78</view>
        <view>79</view>
        <view>80</view>
        <view>81</view>
        <view>82</view>
        <view>83</view>
        <view>84</view>
        <view>85</view>
        <view>86</view>
        <view>87</view>
        <view>88</view>
        <view>89</view>
        <view>90</view>
        <view>91</view>
        <view>92</view>
        <view>93</view>
        <view>94</view>
        <view>95</view>
        <view>96</view>
        <view>97</view>
        <view>98</view>
        <view>99</view>
        <view>100</view>
      </scroll-view>
      
      <scroll-view scroll-y="true" class="right">
        <view>1</view>
        <view>2</view>
        <view>3</view>
        <view>4</view>
        <view>5</view>
        <view>6</view>
        <view>7</view>
        <view>8</view>
        <view>9</view>
        <view>10</view>
        <view>11</view>
        <view>12</view>
        <view>13</view>
        <view>14</view>
        <view>15</view>
        <view>16</view>
        <view>17</view>
        <view>18</view>
        <view>19</view>
        <view>20</view>
        <view>21</view>
        <view>22</view>
        <view>23</view>
        <view>24</view>
        <view>25</view>
        <view>26</view>
        <view>27</view>
        <view>28</view>
        <view>29</view>
        <view>30</view>
        <view>31</view>
        <view>32</view>
        <view>33</view>
        <view>34</view>
        <view>35</view>
        <view>36</view>
        <view>37</view>
        <view>38</view>
        <view>39</view>
        <view>40</view>
        <view>41</view>
        <view>42</view>
        <view>43</view>
        <view>44</view>
        <view>45</view>
        <view>46</view>
        <view>47</view>
        <view>48</view>
        <view>49</view>
        <view>50</view>
        <view>51</view>
        <view>52</view>
        <view>53</view>
        <view>54</view>
        <view>55</view>
        <view>56</view>
        <view>57</view>
        <view>58</view>
        <view>59</view>
        <view>60</view>
        <view>61</view>
        <view>62</view>
        <view>63</view>
        <view>64</view>
        <view>65</view>
        <view>66</view>
        <view>67</view>
        <view>68</view>
        <view>69</view>
        <view>70</view>
        <view>71</view>
        <view>72</view>
        <view>73</view>
        <view>74</view>
        <view>75</view>
        <view>76</view>
        <view>77</view>
        <view>78</view>
        <view>79</view>
        <view>80</view>
        <view>81</view>
        <view>82</view>
        <view>83</view>
        <view>84</view>
        <view>85</view>
        <view>86</view>
        <view>87</view>
        <view>88</view>
        <view>89</view>
        <view>90</view>
        <view>91</view>
        <view>92</view>
        <view>93</view>
        <view>94</view>
        <view>95</view>
        <view>96</view>
        <view>97</view>
        <view>98</view>
        <view>99</view>
        <view>100</view>
      </scroll-view>
    </view>

**表示层，less语言**

page { 
        // 设置page的高为100%,也就是窗口能看到的高度
        height: 100%;
    }
    
    .container { 
        // scroll-view使用最重要的就是要给父容器设置高度
        // 如果不设置高度，就会出现两屏一起滚动，
        // 他们其实是使用了屏幕视图的滚动条了，而不是我们定义的scroll-view组件的滚动条
        height: 100%;
        display: flex; .left { 
            flex: 2;
            background-color: aqua;
        }
    
        .right { 
            flex: 5;
            background-color: yellowgreen;
        }
    }

**gitee代码地址：https://gitee.com/chenminghuisir/wechat-applet-component.git**  
**代码保存在仓库，WXsummary文件里**

[20200901151320677.gif_pic_center]: /images/20221123/6931019e46c149d1aecdd68e3c50c43d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，333人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序可滚动视图区域的使用

<scroll-view class="tab" scroll-x="true"> <text>新闻1</text> <text>新闻2</

旧城等待，/ 2023年01月12日 01:52/ 0 赞/ 202 阅读

相关微信小程序（4）：可滚动视图区域组件

文章目录 scroll-view 可滚动视图区域 1、scroll-y：允许纵向滚动 2、sc

约定不等于承诺〃/ 2022年12月30日 13:59/ 0 赞/ 469 阅读

相关原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）

原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动） ![在这里插入图片描述][20200901151320677.gif_pic

忘是亡心i/ 2022年12月03日 02:21/ 0 赞/ 334 阅读

相关微信小程序实现横向滚动

最近做项目的时候遇到一个需求实现自定义导航栏的横向滚动,研究了一会,今天记录一下. 看一下实现效果: (下面的导航栏由六个view组成,可滑动) ![70][]

ゝ一纸荒年。/ 2022年05月21日 00:45/ 0 赞/ 392 阅读

相关微信小程序 scroll-view 实现横向、纵向滚动

1.纵向滚动 api文档有注明，<scroll-view scroll-y style="height: 400rpx;"> 1231231231</scroll-vie

我就是我/ 2022年05月14日 06:37/ 0 赞/ 373 阅读

相关微信小程序-通知滚动小提示

> 代码地址如下： > [http://www.demodashi.com/demo/14044.html][http_www.demodashi.com_demo_140

朴灿烈づ我的快乐病毒、/ 2022年05月10日 00:46/ 0 赞/ 263 阅读

相关微信小程序之----去掉小程序的滚动条

代码 .v1::-webkit-scrollbar { width: 0; height: 0; color: transpare

偏执的太偏执、/ 2022年04月15日 04:29/ 0 赞/ 706 阅读

相关微信小程序设置滚动条

<scroll-view scroll-y="true" style="height: 200px">

素颜马尾好姑娘i/ 2022年01月26日 14:17/ 0 赞/ 726 阅读

相关微信小程序滚动列表（无限滚动）

![20180507132001955][] 效果图1.0 实现方式是利用小程序原声组件swiper，方向设置为纵向：vertical=‘true’设置同时显示的滑块数

我就是我/ 2021年12月11日 14:23/ 0 赞/ 975 阅读

相关微信小程序--分类选择区域滚动到顶部时固定

实现思路：根据小程序自带的组件scroll-view自带有属性bindscroll（滚动时触发）。通过这个属性获取浏览器滚动条距离顶部的位置，通过这个位置判断class类的显

梦里梦外;/ 2021年07月25日 00:32/ 0 赞/ 734 阅读