短视频小程序Swiper+Video在大部分苹果手机IOS机型中出现闪退?
发布于 6 年前 作者 leijia 8038 次浏览 来自 问答

在开发短视频小程序中,使用Swiper+ Video 的方式实现,目前是保持Swiper中四个swiper-item,在每次滑动时进行替换,默认播放首个视频,滑动暂停上一个,在swiper的chnge绑定的方法中,每次都有判断更新替换视频数据, 在IOS中滑动视频过程中会出现有些视频滑到后不播放,频繁滑动后会出现闪退! IOS机型如下图

监控日志中显示 应该是内存溢出导致的

<view class="wrapper">

    <swiper

            style="width:{{screenWidth}}px;height:{{screenHeight}}px"

            class="video-swiper"

            circular="{{circular}}"

            easing-function="{{easingFunction}}"

            vertical

            current="1"

            duration="{{duration}}"

            bindanimationfinish="animationfinish">

        <!-- curQueue 循环会导致video重新插入,objectFit 不可变更 -->

        <swiper-item wx:for="{{curQueue}}" wx:key="index">

            <view class="shadow"></view>

            <video

                    style="width:{{screenWidth}}px;height:{{screenHeight}}px"

                    miLinToken="{{miLinToken}}"

                    id="{{tabType}}video_{{index}}"

                    class="video_item"

                    loop="{{loop}}"

                    enable-play-gesture

                    enable-progress-gesture

                    show-center-play-btn="{{false}}"

                    controls="{{false}}"

                    src="{{item.video_url}}"

                    data-id="{{item.id}}"

                    object-fit="{{item.sp_text ? item.sp_text: 'contain'}}"

                    data-index="{{index}}"

            >

            </video>

           

            <view class="video_box_fn">

                <view class="vbf_avatar mb32">

                    <image src="{{item.logo}}" class="avatar" mode="aspectFill" catch:tap="toHome"

                           data-videodata="{{item}}" />

                    <image src="../../images/explosive/[email protected]" wx:if="{{item.is_follow===0}}" class="add_icon"

                           catch:tap="addFollow" data-type="1" data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />

                    <image src="../../images/explosive/checkedfollow.png" wx:else class="add_icon" catch:tap="addFollow"

                           data-type="0" data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />

                </view>

                <view class="vbf_fn mb32">

                    <image src="../../images/explosive/[email protected]" wx:if="{{item.is_zan===0}}" class="fn_icon"

                           catch:tap="addLike" data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />

                    <image src="../../images/explosive/[email protected]" wx:else class="fn_icon"  catch:tap="addLike"

                           data-itemindex="{{itemIndex}}" data-videodata="{{item}}" />

                    <text class="fn_num">{{toUnit.numToUnit(item.sum_zan)}}</text>

                </view>

                <view class="vbf_fn"  catch:tap="openShare" data-itemindex="{{itemIndex}}" data-videodata="{{item}}">

                    <image src="../../images/explosive/[email protected]" class="fn_icon" />

                    <text class="fn_num">{{toUnit.numToUnit(item.sum_fen)}}</text>

                </view>

            </view>

            <!--视频描述-->

            <view wx:if="{{!controls}}">

                <view class="video_box_desc">

                    <!--产品卡片-->

                    <view class="video_box_product" data-videodata="{{item}}"  catch:tap="toDetail">

                        <image class="vbp_pic" src="/images/explosive/product.png" mode="aspectFill" />

                        <view class="vbp_desc">

                            <text class="vbp_desc_name">{{item.tc_name}}</text>

                            <text class="vbp_desc_price">¥{{(item.discount_price)}}</text>

                        </view>

                    </view>

                    <view class="video_desc">{{item.video_title}}</view>

                </view>

                <!--店铺地址-->

                <view class="shop_address" catch:tap="toShopHome" data-videodata="{{item}}">

                    <image src="/images/explosive/[email protected]" class="shop_icon" />

                    <text class="shop_name">{{item.shop_name}}({{item.distance}})</text>

                </view>

            </view>

            <view class="bottom_shadow"></view>

        </swiper-item>

    </swiper>

    <!-- 暂停按钮 -->

    <view wx:if="{{isShowPauseBtn}}" class="push_btn"  catch:tap="handlePlay" data-itemindex="{{itemIndex}}"

          data-videodata="{{item}}">

        <image src="/images/explosive/pause.png" class="pause_icon"/>

    </view>

    <view wx:if="{{isShowLikeIcon}}" class="like-icon"

          style="position:absolute; left:{{row-200}}px; top:{{top-200}}px;width:800rpx;height:800rpx;">

        <canvas id="like_lottie" type="2d" style="width: 100%;height: 100%;"/>

        <!--        <image src="/images/bg/love.png" animation='{{animationMiddleHeaderItem}}' style="width: 100%;height: 100%;" />-->

    </view>

</view>

<wxs module="toUnit">

    var numToUnit = function (num) {

        var w = num;

        if (num >= 10000) {

            w = num / 10000;

            w = w.toFixed(1);

            w = w + 'w';

        }

        return w;

    }

    module.exports = {

        numToUnit: numToUnit

    }

</wxs>

1 回复

请具体描述问题出现的流程,并提供能复现问题的简单代码片段,上传一下代码片段哈(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

回到顶部