uniapp+uview开发企业微信应用的问题及解决记录

八岐大兔吼啦吼啦

已于 2024-02-06 15:14:30 修改

阅读量1k

点赞数

分类专栏： uni-app 文章标签： uni-app 前端

于 2023-08-22 10:26:34 首次发布

本文链接：https://blog.csdn.net/weixin_53582738/article/details/132420807

版权

uni-app 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、已解决问题

1、uview的Tabs 标签做顶部导航，样式错误

2、列表滚动到底部，下拉刷新报错

3、uniapp动态获取元素高度不能使用ref

4、uniapp的在scroll-x模式下，ios显示异常

5、列表页含有子组件时，点击子组件的卡片进入操作页，【提交】表单后返回上一页，不重新请求并渲染数据

二、暂未解决问题，先做记录

1、u-Picker 选择器，选择某项

2、uview的BackTop返回顶部组件，一旦有数据则不显示；在子组件中也不显示

一、已解决问题

1、uview的Tabs 标签做顶部导航，样式错误

数据仅为2条（4条以下）时，标签整体居左，且滑块显示偏左（下图）

解决：

方法1：加一点偏移量

// 这个位置是自定义的class，我放在了整个页面中，顶部导航下的内容区是子组件已给了动态的固定高度
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
 //这个位置距离要计算，基本差不多就行，暂时没翻车
::v-deep .u-tabs__wrapper__nav__line {
  left: 40rpx;
}

方法2：最近发现在组件的felx布局基础上设置样式竟然生效了，还是直接定位到中间修改更好些（以前不生效才使用的方法1）

<u-sticky bgColor="#fff">
      <u-tabs
        :list="List"
      >
</u-tabs>

// css部分
// 将宽度拉到和屏幕一样长
.content .u-sticky {
  width: 100%;
}
// 给每个标签块赋为等宽（50%以前用过不好用，这次更新方法也没试）
::v-deep .u-tabs__wrapper__nav__item {
  flex: 1;
}

2、列表滚动到底部，下拉刷新报错

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false

出现原因：下拉刷新和列表内容滚动冲突。

解决思路：使用scroll-view自带的下拉刷新，不使用uniapp的api。

3、uniapp动态获取元素高度不能使用ref

说uniapp支持vue写法，但是并不支持ref获取dom，要是用uniapp的api。如下：

需绑定id使用uni.createSelectorQuery()
示例：
uniapp给子组件动态高度
 // 计算内容区高度 - 名字 - 完了日期 - unicard组件自带的上下padding
    // const query = uni.createSelectorQuery().in(this);
    // let tempNameH = ''
    // let tempTimeH = ''
    // query.select('#name_id').boundingClientRect(data => {
    //   tempNameH = data.height
    // }).exec();
    // query.select('#time_id').boundingClientRect(data => {
    //   tempTimeH = data.height
    // }).exec();
    // this.contentClass.height = (Math.round(this.cardViewHeight.slice(0, this.cardViewHeight.indexOf('p'))) - tempNameH - tempTimeH - 28) + 'px'
    // // %行高后  取值1 / 0
    // let tempNum = (this.cardViewHeight.slice(0, this.cardViewHeight.indexOf('p')) - tempNameH - tempTimeH - 28) % 25 > 20 ? 1 : 0
    // this.contentClass['-webkit-line-clamp'] = Math.floor((this.cardViewHeight.slice(0, this.cardViewHeight.indexOf('p')) - tempNameH - tempTimeH - 28) / 25) + tempNum