赞
踩
在写项目的时候前期需求要求底部导航栏中间部分凸起,样式为一个蓝色的圈圈(发布按钮),而原生的uniapp不支持自定义底部导航栏,于是需要进行自定义修改。
解决方法:
在uniapp官网的插件市场中,根据别人写的插件,使用非原生的方式自行实现底部导航栏和页面跳转(此时pages.json对底部导航栏的功能将不再使用)。
实现原理:
将一个需要跳转的页面写成一个组件,当点击导航栏的时候,去判断自定义的底部导航栏index,不同的index,使不同的组件出现或消失。
优点:
可以方便的对底部导航栏进行自定义,不受原生uniapp的约束。
缺点:
在页面跳转的过程中,加载速度没有原生的快。
1、在使用navigator标签还有uni.navigateTo的时候,页面跳转不成功,pages.json中已经注册过相应页面,没有反应。
解决方法:
在路径前边加上 / 而不使用 …/
2、自定义底部导航栏,在页面跳转之后,原来没有返回按钮的页面出现了返回按钮。
解决方法:
将跳转方法改为返回方法,即将uni.navigateTo()改为uni.navigateBack()。
使用<scroll-view></scroll-view>
标签想要实现横向滑动的时候,发现当滑动元素的代码结构不同的时候,会出现样式上下对不齐的情况。
解决方法:
设法将代码结构统一,如果统一不了可以使用一些比较粗暴的方法,比如设置一些元素opacity:0,如果有更好的方法不建议使用粗暴方法。
实现横向滑动条件:使用<scroll-view></scroll-view>
标签,设置scroll-x = "true"
,将需要横向滑动的元素添加css属性white-space: nowrap
,必要时,可以添加display: inline-block
属性。
在uni-app的项目中,要求动态渲染分类列表数据,由于有一个数据延迟加载的效果,我用了一个大对象包住数组的方式然后循环渲染,结果更新不更新,要到另一个加载的页面触发事件后,之前的效果才出现
这里有两点:
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。