最近开发一个博物馆小程序，详情页需要文物的图片轮播，同时还需要图片支持缩放，所以最开始考虑swiper组件内嵌movable组件再嵌image，但swiper和movable两个组件的滑动手势相冲突，所以自定义了swiper组件，也就是swiper-movable.ttml嵌custom-dragImg.ttml。现在遇到的问题是自定义轮播组件内嵌movable-view组件再内嵌图片，在IOS上切换图片会闪屏。已能确定是css兼容性问题。
swiper-movable.ttml相关标签：
<view class="swiper" style="{{utils.containerSize(screenWidth,screenHeight)}}">
<view
bindtouchmove="touchmoveList"
bindtouchend="touchendList"
class="swiper-list {{canAnimate?'swiper-animation':''}}"
style="width: {{imgList.length * 750}}rpx;height: {{screenHeight}}px;left: {{currentPageX}}px;"
>
<view
tt:for="{{imgList}}"
class="swiper-item"
style="{{utils.containerSize(screenWidth,screenHeight)}}"
>
<custom-dragImg
tt:if="{{utils.includesKeyword(catchList,current+'-'+index)}}"
class="custom-dragImg"
bindstart="touchStartList"
isClean="{{isClean}}"
imgInfo="{{item}}"
imgIndex="{{index}}"
current="{{currentSwiperIndex}}"
currentRelicIndex="{{current}}"
isDetail="{{isDetail}}"
firstImgHeight="{{firstImgHeight}}"
relics="{{relicsList[current]}}"
/>
</view>
</view>
</view>
swiper-movable.ttml相关样式：
.swiper {
position: relative;
transform: translate3d(0px, 0px, 0px);
}
.swiper-list {
position: absolute;
top: 0;
display: flex;
transform: translate3d(0px, 0px, 0px);
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.2s;
}
.swiper-item {
box-sizing: border-box;
position: relative;
overflow: hidden;
transition: height linear 0.2s;
box-sizing: content-box;
margin-left: -1px;
padding-left: 1px;
transform: translate3d(0px, 0px, 0px);
}
custom-dragImg.ttml相关标签：
<view
class="dragImg {{showMovableTransitionClass?'dragImgTransition':''}}"
bindtouchstart="startTouchContainer"
bindtap="tapPaint"
style="{{utils.containerSize(movableAreaWidth,movableContainerHeight)}};{{u tils.containerBackground(imgInfo.classificationType)}}"
>
<view
class="movableContainer {{showMovableTransitionClass?'movableContainerTransition':''}}"
style="padding-top: {{statusBarHeight}}px;{{utils.containerBackground(imgInfo.classificationType)}}{{utils.containerSize(movableAreaWidth,movableContainerHeight)}}"
>
<movable-area
tt:if="{{showMovable}}"
bindtouchstart="toStartSwiper"
data-type="movableArea"
style="{{utils.containerSize(movableAreaWidth,movableAreaHeight)}}"
class="movableArea"
scale-area="{{true}}"
>
<movable-view
bindtouchend="handleTouchEndMovable"
bindtouchmove="moveMovable"
scale-value="{{scale}}"
scale-min="{{0.5}}"
scale-max="{{scaleMax}}"
bindchange="{{imgShapeMode === 'high'?'verticalPositionChange':'horizontalPositionChange'}}"
bindscale="{{imgTypeMode === 'vertical'?'verticalScaleChange':imgTypeMode === 'horizontal'?'horizontalScaleChange':'innerScaleChange'}}"
x="{{x}}"
y="{{y}}"
inertia="{{false}}"
scale="{{!imgInfo.is3D&&canScale}}"
out-of-bounds="{{false}}"
style="{{imgInfo.is3D ? utils.containerSize(movableAreaWidth,movableAreaHeight): utils.containerSize(movableViewWidth,movableViewHeight)}}"
class="movableView {{showMovableTransitionClass?'movableTransition':''}}"
direction="{{utils.calcDirection(imgInfo,recordScale,direction,imgTypeMode)}}"
animation="{{false}}"
>
<!-- 沉浸态 -->
<image
hidden="{{isDetail}}"
bindload="imgLoaded"
binderror="imgLoadError"
bindtouchstart="typeTouch"
data-touchtype="origin"
src="{{imgInfo.url}}"
/>
<!-- 详情态 -->
<!-- 细节图也加载高清 -->
<image
hidden="{{!isDetail}}"
bindtouchstart="typeTouch"
data-touchtype="origin"
src="{{imgIndex === 0 ? imgInfo.medium_size_url : imgInfo.url}}"
/>
</movable-view>
</movable-area>
</view>
</view>
custom-dragImg.ttss相关样式：
.dragImg {
position: relative;
box-sizing: border-box;
transform: translate3d(0px, 0px, 0px);
}
.movableContainerTransition {
transition: height linear 0.2s;
}
.movableArea {
position: relative;
transform: translate3d(0, 0, 0) !important;
}
.movableTransition {
transition: all linear 0.2s;
}
.movableView > image {
position: relative;
/* 解决IOS放大后模糊的问题 */
width: 400%;
height: 400%;
transform-origin: left top;
transform: translate3d(0, 0, 0) scale(0.25, 0.25);
/* 解决IOS放大后模糊的问题end */
}
运行结果及报错内容：在IOS端切换图片，图片会闪烁，在模拟器、安卓端不会
复现效果：可抖音搜索“河南博物院”（IOS端），点开小程序，点进文物详情页（非有3D资源的文物），在详情态或沉浸态从左到右再从右到左来回切换图片
我的解答思路和尝试过的方法：
在百度找过相关方法并已尝试，但效果不理想：
- 在父元素.swiper-list上加overflow: hidden;translate3d(0, 0, 0);在闪动的子元素上加translate3d(0, 0, 0);几乎没有效果
- 其他图片在当前图片这一屏未显示，可能IOS有性能优化会“懒加载”，所以图片会闪，因此让轮播的每一项子元素溢出到上一张或下一张上。尝试后有效果，但只有当下一张或上一张image覆盖到当前图片这一屏才会不闪，不能单纯只用.swiper-item覆盖，不然也是没效果，但目前不是所有图片宽度都会超出屏幕，所以不能用图片宽度溢出到当前屏幕的方法来解决。参考链接https://www.jianshu.com/p/61684948adfd
我想要达到的结果：轮播切换图片在IOS端不闪烁
