uniapp黑马项目总结( 二 )


分类导航区域
渲染然后再使用uni.()跳转页面

// nav-item 项被点击时候的事件处理函数navClickHandler(item) {// 判断点击的是哪个 navif (item.name === '分类') {uni.switchTab({url: '/pages/cate/cate'})}}
三级分类 , 左右侧滚动
xxxxxxxxxxxxxxx多复制一些节点 , 演示纵向滚动效果...zzzzzzzzzzzz多复制一些节点 , 演示纵向滚动效果
这里有一个bug , 就是每点一次左边的一级分类 , 再滚动右侧的二三级分类 , 再点一点一级分类 , 会发现右边的滚动条并不是在顶部 , 所以要动态绑定一个-y属性 , 然后每一次点击了一级分类 , 重置为0
data() {return {// 滚动条距离顶部的距离scrollTop: 0}}

// 选中项改变的事件处理函数activeChanged(i) {this.active = ithis.cateLevel2 = this.cateList[i].children// 让 scrollTop 的值在 0 与 1 之间切换this.scrollTop = this.scrollTop === 0 ? 1 : 0// 可以简化为如下的代码:// this.scrollTop = this.scrollTop ? 0 : 1}
封闭my-组件
由于搜索组件要在很多页面都要进行重用 , 所以这里可以封闭为一个组件
1、在根目录下新建一个 , 再新建组件
2、直接在结构中以标签的方式直接使用自定义组件

在分类页面中 , 加上了自定义搜索组件后 , 右侧分类下面会不能滑动到底部 , 因为样式的原因 , 所以还需要在挂载的时候就要减去搜索组件的大小
onLoad() {const sysInfo = uni.getSystemInfoSync()// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度this.wh = sysInfo.windowHeight - 50}
为了增加组件的通用性 , 我们可以通过props来定义属性 , 以方便以后使用的时候可以通过传入参数 , 让组件更个性化
1、通过props来定义两个变量
props: {// 背景颜色bgcolor: {type: String,default: '#C00000'},// 圆角尺寸radius: {type: Number,// 单位是 pxdefault: 18}}
2、再动态的绑定stype属性