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

需要用到视图容器组件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;
}

calc函数的用法：用于动态计算长度值
注意：运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

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

自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...
Python+微信小程序开发（四）页面跳转和获取用户信息
上一篇已经介绍了如何搭建一个自己的静态页面,接下来则涉及到一些用户信息获取与跳转的操作. 一.页面跳转首先新建一个跳转页面,按上篇的操作生成pages/redirect/redirect. 1.对标 ...
【零基础】学会微信小程序开发-实现第一个页面
上一篇我们了解了微信小程序代码结构组成,本篇文章,我们将要开始进行小程序的真正开发工作,Let's go! ##第一个页面让我们来创建第一个页面右键单击 pages 目录,在弹出来的菜单里,选择 ...
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
学习笔记（1):微信小程序开发实战-计算器实战页面布局
立即学习:https://edu.csdn.net/course/play/3011/49695?utm_source=blogtoedu 20200701晚,学到12min
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
微信小程序开发【一】-- 初识小程序
小程序已经火了很久了,一直想学习小程序,苦于工作比较忙,加班比较多没时间,当然这其实都是理由,很多时候习惯了搬砖,习惯了固定的圈子,很难也不想涉足其他的领域,但是也不能老错过一波又一波新鲜的东西吧. ...
微信小程序开发demo
前言链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...

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

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

最新文章

热门文章