uniapp的那些坑

    技术2022-07-11  165

    1.selectedColor不起作用

         1.查看位置是否写对,与lis同级

                     

     2.是否为16进制,selectedColor写的rgb不支持

     3.是否被其他样式覆盖,其他地方也设置过selectedColor,可以全局搜索一下

     

    2.pages中配置的颜色不起作用

    注意,pages中的某些配置,是只支持某些颜色,或者是只支持16进制,当某个颜色不起作用,可以查看官网是否有颜色的限制,或者切换成white,black,16进制试试

     

     

     

    3.input框被输入键盘覆盖

      如  :

    input这些输入框,有一个自带的属性,可以设置键盘到输入框的距离

    如:

    设置样式后正常

                 

     

     

    4.有遮罩层时,禁止滚动

       自己写的遮罩,会出现滚动,导致遮罩层出问题

       解决方案:方法写空也没有关系   @touchmove.stop.prevent="moveHandle"

     

    5.设置pages铺满

        使用vh单位 - 100vh

     

    6.设置单个页面的背景色

    直接在单个页面的样式中

     

    7.设置position为fixed的时候,设置了top,总是不是预期效果

    那是因为默认uniapp的顶部高度是44px,你的定位是相对于页面的最顶端,而不是他配置之后的剩余页面,因此你的定位的高度,如果是fixed,其实应该是默认是top值要加上顶部导航栏高度的啦

     

    8.取消了顶部导航栏,出现页面和手机基本信息(信号,时间等)重合

    设置取消导航栏

    { "path": "pages/addressBook/myInfoDetail", //个人通讯录详情 "style": { "app-plus": { "titleNView": false } } },

    取消导航栏后页面在手机的效果

    解决方案,页面上面写样式占位 - css的变量会自动获取到手机顶部信息栏的高度

    <view class="status_bar"> <view class="top_view"> </view> </view> .top_view { height: var(--status-bar-height); width: 100%; position: fixed; background-color: #186ff2; top: 0; z-index: 999; }

     

    9.uni.navigateTo无法跳转

    原因又几个 -

    第一,查看你跳转的路径是不是是tabBar的路径(官网上标注了,是不能用navigateTo去跳转tabBar配置的路径,跳转tab配置的页面 - uni.switchTab(OBJECT))

    第二,查看当前的语法是否错误,你的url是都正确

    goDeal() { uni.navigateTo({ url: './deal' }) }

    第三, 查看pages..json中的路径是否正确

    只有都配置对了才可以正确跳转哦

    如果是想看pages的配置,怎么配置导航栏以及有些什么配置移步一下这篇记录吧!, - https://blog.csdn.net/qq_42625428/article/details/107000042

     

    10.uniapp的富文本,不支持vedio标签,因此uniapp自带的富文本不能上传视频

     

    11,uniapp的请求uni.request是不支持直接传formData的

    因此要想上传formData,需要将修改为如下

     

    12.控制自带的返回按钮去自己想要的页面

    解决方法 - 

     

    13.下拉刷新在app端没有效果

    注意,scroll-view有自己的下拉刷新,如果是原生配置像下面配置使用的,在页面中就不能用scroll-view了

    { "path": "pages/commonComponents/DynamicForm/index", //公共表单首页 "style": { "enablePullDownRefresh": true, //可以下来刷新 "titleNView": { "titleColor": "#ffffff", "titleText": "", "backgroundColor": "#186ff2" }, "navigationStyle": "default", "pullToRefresh": { //下来刷新样式 "support": true, "style": "default", "offset": "70px", "color": "#007AFF", "contentdown": { "caption": ""//下拉可刷新自定义文本 } } } onPullDownRefresh(){ // console.log('onpull') if(this.TabCur == 0){ uni.stopPullDownRefresh() return } this.$nextTick(() => { this.$refs.approvalDate.getList(); setTimeout(() => { uni.stopPullDownRefresh() }) })

    也就是说scroll-view可以定义自己的刷新,也可以使用原生配置刷新,但是不能进行混合使用哦

    scroll-view的下拉刷新有自己的定义事件,如下

    14.注意uniapp的api支持的范围,有些是只支持h5。

    所以想要实现富文本上传视频啊,附件上传,附件预览等等功能看下面这篇

    https://blog.csdn.net/qq_42625428/article/details/107000042

     

    15.绑定点击事件不起作用,或直接被触发多次 - @click.native(原生绑定)

    <view class="form_button flex_a" v-if="showSearchList"> <u-button @click.native="searchSubmit">确定{{searchChooseNum}}</u-button> </view>

     

     

     

     

     

     

    Processed: 0.012, SQL: 9