广州极智
广州极智
  • 发布:2023-03-01 17:35
  • 更新:2023-03-16 22:30
  • 阅读:614

【报Bug】iOS list 组件的内容有渐变+圆角时滑动会闪退

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.6.8 (20G730)

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

手机系统: iOS

手机系统版本号: iOS 16

手机厂商: 苹果

手机机型: iphone xr

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
  <view class="page-root">  
    <list class="list">  
      <cell v-for="item in arr" :key="item.id">  
        <view class="item">  
          <text>{{ item.id }}渐变+设置圆角时会闪退!!!!</text>  
          <template>  
            <image  
              style="width: 300px;height: 50px;"  
              src="https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png"  
              mode="scaleToFill"  
            />  
            <image  
              style="width: 300px;height: 50px;"  
              src="https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png"  
              mode="scaleToFill"  
            />  
            <text>内容越多越容易触发闪退!!!!</text>  
            <text>uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。</text>  
          </template>  
          <view class="bg">  
            border-radius  
          </view>  
        </view>  
      </cell>  
    </list>  
  </view>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      message: '',  
      arr: []  
    }  
  },  
  onLoad() {  
    this.init()  
    const arr2 = []  
    let i = 0  
    while (i < 100) {  
      arr2.push({  
        id: 'radius' + (i + 1)  
      })  
      i++  
    }  
    this.arr = arr2  
  },  
  methods: {  
    init() {  
      //  
    }  
  }  
}  
</script>  
<style scoped lang='scss'>  
.page-root {  
  margin-top: 100rpx;  
}  

.list {  
  display: flex;  
  width: 750rpx;  
  flex-direction: column;  
  padding: 30rpx;  
}  

.item {  
  width: 690rpx;  
  display: flex;  
  height: 300rpx;  
  flex-direction: column;  
  border: 1px solid #e0e0e0;  
  margin-bottom: 30rpx;  
}  

.bg {  
  width: 690rpx;  
  height: 38rpx;  
  /* 注释下面两行就不会了 */  
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));  
  border-radius: 0 0 12rpx 12rpx;  
}  
</style>  

操作步骤:
  <view class="page-root">  
    <list class="list">  
      <cell v-for="item in arr" :key="item.id">  
        <view class="item">  
          <text>{{ item.id }}渐变+设置圆角时会闪退!!!!</text>  
          <template>  
            <image  
              style="width: 300px;height: 50px;"  
              src="https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png"  
              mode="scaleToFill"  
            />  
            <image  
              style="width: 300px;height: 50px;"  
              src="https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png"  
              mode="scaleToFill"  
            />  
            <text>内容越多越容易触发闪退!!!!</text>  
            <text>uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。</text>  
          </template>  
          <view class="bg">  
            border-radius  
          </view>  
        </view>  
      </cell>  
    </list>  
  </view>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      message: '',  
      arr: []  
    }  
  },  
  onLoad() {  
    this.init()  
    const arr2 = []  
    let i = 0  
    while (i < 100) {  
      arr2.push({  
        id: 'radius' + (i + 1)  
      })  
      i++  
    }  
    this.arr = arr2  
  },  
  methods: {  
    init() {  
      //  
    }  
  }  
}  
</script>  
<style scoped lang='scss'>  
.page-root {  
  margin-top: 100rpx;  
}  

.list {  
  display: flex;  
  width: 750rpx;  
  flex-direction: column;  
  padding: 30rpx;  
}  

.item {  
  width: 690rpx;  
  display: flex;  
  height: 300rpx;  
  flex-direction: column;  
  border: 1px solid #e0e0e0;  
  margin-bottom: 30rpx;  
}  

.bg {  
  width: 690rpx;  
  height: 38rpx;  
  /* 注释下面两行就不会了闪退 */  
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));  
  border-radius: 0 0 12rpx 12rpx;  
}  
</style>  

预期结果:

不会闪退

实际结果:

快速上下滑动时,会闪退

bug描述:

iOS 真机,测试了 iPhone xr 和 iPhone 11 ,list 组件的 cell 里面有渐变 + 圆角时,快速上下滑动会闪退或卡死;

运行 demo 到 iOS 真机,最好是 iPhone xr 机型,测试 iPhone 13 pro max 很难触发闪退,需要拖住右边的滚动条更快速滑动才会。
复现 demo 已上传到附件;

2023-03-01 17:35 负责人:无 分享
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 3.7.7.20230316-alpha 已修复。

DCloud_iOS_XHY

DCloud_iOS_XHY

问题已确认,下个版本会修复此问题

广州极智

广州极智 (作者)

官方可以解决一下吗

DCloud_iOS_XHY

DCloud_iOS_XHY

iPhoneXR iOS16.1 测试没有出现闪退,拖动滚动条滚动也没复现出来

  • 广州极智 (作者)

    拖动滚动条滚动要快一些并且要多滑动几次,不是一次就会闪退,需要来回滚动

    2023-03-02 16:44

广州极智

广州极智 (作者)

复现闪退的操作视频已上传到附件

要回复问题请先登录注册