uni-app之避雷针（自用记录，持续更新，欢迎补充）

快来打我* 2023-06-28 09:53 12阅读 0赞

### 小程序之那些年我们一起踩过的坑 ###

*   *   *   *   *   *  一、canvas
                     *  二、swiper
                     *  三、表单组件
                     *  四、button
                     *  五、微信公众号，页面下拉出现网址。
                     *  六、微信公众号，小程序，获取收货地址，区级不一致。
                     *  七、循环列表修改单个项数据时。

> 自己做记录用的，不分先后顺序，想到哪写哪~哈哈

###### 一、canvas ######

1.  canvas封装组件获取不到当前生成实例。  
    **解决：**  
    组件中创建canvas实例的时候，要传入第二个参数this。（api写的有，我确实没注意到）  
    ![canvas][]

###### 二、swiper ######

1.  swiper中的文本不会换行。  
    **解决：**  
    swiper中的文本默认，white-space: nowrap;  
    在需要换行的标签加入，white-space: normal;

###### 三、表单组件 ######

1.  textarea 多行输入框，在父级定位元素，属性为absolute、fixed，中时候，  
    value和placeholder的值，随页面滚动。  
    **解决：**  
    需要确保，textarea所有父级，没有over-flow，属性。  
    在texarea 中加入fixed属性。
2.  radio，checkout选中取消，默认样式修改  
    在app.vue中加入一下css
    
        uni-radio:not([disabled]) .uni-radio-input:hover, uni-checkbox:not([disabled]) .uni-checkbox-input:hover { 
        border-color: #ccc !important;

\}  
\`\`\`

###### 四、button ######

1. Open-data 按钮图片圆角 css加入Overflow:hidden;

###### 五、微信公众号，页面下拉出现网址。 ######

> 微信公众号，下拉出现网址，和页面滚动冲突。

// #ifdef H5
    let listenMove = document.body;
    //handle不能为匿名函数，不然无法移除
    let handle = function (e) { 
        e.preventDefault();
    };
    //添加
    listenMove.addEventListener('touchmove', handle, { 
        passive: false
    });
    //移除
    listenMove.removeEventListener('touchmove', handle, { 
        passive: true
    });
    		// #endif

###### 六、微信公众号，小程序，获取收货地址，区级不一致。 ######

//伪代码
    wx.chooseAddress({ 
      success (res) { 
        console.log(res.userName)
        console.log(res.postalCode)
        console.log(res.provinceName)
        console.log(res.cityName)
        console.log(res.countyName)//小程序区
        console.log(res.countryName)//公众号jsdk区
        console.log(res.detailInfo)
        console.log(res.nationalCode)
        console.log(res.telNumber)
      }
    })

###### 七、循环列表修改单个项数据时。 ######

> vue中循环列表有时候会用index作为key值，当你修改单个项目数据的时候不要使用index作为key,  
> 比如购物车中，修改某个商品数量为0时删除当前项，用index为key时，删除项的0，会被列表重置后的同一index继承。

[canvas]: https://img-blog.csdnimg.cn/20200108164930419.png