微信小程序项目_秋泊优选09

6、分类页面的布局1

1 编辑pages\category\index.json文件
修改标题文字

{"usingComponents": {//加载自定义搜索框组件"SearchInput":"../../components/SearchInput/SearchInput"},"navigationBarTitleText": "商品分类"
}


小程序当中提供实现页面滚动效果“scroll-view组件”

2 编辑pages\category\index.wxml文件
修改主体结构

<view class="cates"><SearchInput>SearchInput><view class="cates_container"><scroll-view scroll-y class="left_menu">scroll-view><scroll-view scroll-y class="right_content">scroll-view>view>
view>


3 修改样式文件pages\index\index.wxss
在vsc中将index.wxss该为index.less编写样式

page{height: 100%;
}
.cates{height: 100%;.cates_container{/*less中使用calc的时候要注意*/height: ~'calc( 100vh - 90rpx )';display: flex;.left_menu{/*子项高度100% flex */flex:2;background-color:aqua;}.right_content{/*子项高度100% flex */flex: 5;background-color:pink;}}
}