微信小程序开发之侧边栏与页面分开滑动

最新推荐文章于 2024-06-19 14:51:59 发布

鸭鸭:)

最新推荐文章于 2024-06-19 14:51:59 发布

阅读量998

点赞数 1

分类专栏：微信小程序开发前端文章标签： javascript

本文链接：https://blog.csdn.net/Vevean2545116309/article/details/113732235

版权

前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

微信小程序开发

7 篇文章 0 订阅

订阅专栏

需要用到视图容器组件scroll-view，使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
在这里插入图片描述
wxml代码如下：

<view class="pyg_category">
    <SearchInput></SearchInput>
    <view class="cates_container">
        <!--左侧菜单-->
        <scroll-view scroll-y class="left_menu" >
            <view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view>
                      <view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view><view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view><view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view>
        </scroll-view>    
        <!--右侧商品内容-->
        <scroll-view scroll-y class="right_content">
             <view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view>
                      <view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view><view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view><view>1</view>
             <view>1</view>
              <view>1</view>
               <view>1</view>
                <view>1</view>
                 <view>1</view>
                  <view>1</view>
                   <view>1</view>
                    <view>1</view>
                     <view>1</view>
                      <view>1</view>
        </scroll-view>
          
    </view>
      
</view>

wxss代码如下：

page{
    height:100%;
}
.pyg_category{
    height:100%;
}
.pyg_category .cates_container{
    height:calc(100vh - 90rpx);//注意减号左右两边要有空格
    display:flex;
}
.cates_container .left_menu{
    flex:2;
    background-color: pink;
}
.cates_container .right_content{
    flex:5;
    background-color: green;
}