微信小程序scroll-view标签

 页面效果如下图所示:

wxml:

<view class="homes">
    <!-- 调用搜索框组件 -->
    <searchInput></searchInput>

    <!-- 小程序滚动容器 -->
    <view class="home_container">
        <!-- 左侧菜单 -->
        <scroll-view scroll-y class="left_menu">
            <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 class="right_menu">
            <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>
</view>

 wxss:

/* 整个页面的高度为100% */
page{
    height: 100%;
}
.homes{
    height: 100%;
}
.home_container{
    /* 1.容器总高度为100vh
       2.上方搜索菜单为90rpx
       3.下方tabBar菜单的高度不用减
    */
    height: calc(100vh - 90rpx);
    display: flex;
}
.left_menu{
    flex:2;
    background-color: sandybrown;
}
.right_menu{
    flex:5;
    background-color: springgreen;
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值