收藏
回答

snapshot 组件生成带循环数组的长图海报时有缝隙?

<snapshot id="my-snapshot" class="intro" style="width: {{375*content.s}}px;" mode="view">
    <view style="background-color: {{content.bg.bg}};">
        <view style="width:{{375}}px;height:{{(content.h*content.s+content.pp*2)}}px;transform: scale({{content.s}}); transform-origin: 0 0;margin:0 0px;padding:{{content.pp}}px;box-sizing: border-box;">
            <block wx:for="{{content.nodes}}" wx:key="index" wx:for-index="divIndex">
                <view catch:tap="div" data-name="div" data-index="{{divIndex}}" style="display:flex;width:100%;height:{{item.h}}px;position: relative;background: {{item.bg.b}};z-index: 0;overflow: hidden;">
                    <block wx:for="{{item.items}}" wx:key="index">
                        <!-- 图片属性 -->
                        <view wx:if="{{item.n=='i'}}" class='touchWrap' id="{{item.id}}" style='width:{{item.bw}}px;height:{{item.bh}}px;left: {{item.l+item.bl}}px;top: {{item.t+item.bt}}px;transform: rotate({{item.a}}deg); position: absolute;z-index: 0;'>
                            <view catch:tap="active" data-id='{{item.id}}' data-divindex="{{divIndex}}" data-active="{{item.at}}" data-name="image" style="width:{{item.bw}}px;height:{{item.bh}}px;overflow: hidden;border-top-left-radius: {{item.ra}}px;border-top-right-radius: {{item.rb}}px;border-bottom-right-radius: {{item.rc}}px;border-bottom-left-radius: {{item.rd}}px;mask:{{item.m}};mask-size: {{item.bw}}px {{item.bh}}px;mask-repeat: no-repeat;">
                                <image lazy-load src='{{item.url}}' style='width:{{item.w}}px;height:{{item.h}}px;left: -{{item.bl}}px;top: -{{item.bt}}px;opacity:{{item.o}};z-index: 1;transform: scaleX({{item.f}});'></image>
                            </view>
                        </view>

                        <!-- 文本属性 -->
                        <view wx:if="{{item.n=='t'}}" class='touchWrap' style='text-align:{{item.ta}};top:{{item.t}}px;left:{{item.l}}px;position: absolute;z-index: 0;transform: rotate({{item.a}}deg);'>
                            <view catch:tap="active" data-id='{{item.id}}' id='{{item.id}}' data-divindex="{{divIndex}}" data-active="{{item.at}}" data-name="text" catchtouchstart="{{id==item.id ? 'start' : ''}}" catchtouchmove="{{id==item.id ? 'move' : ''}}" catchtouchend="{{id==item.id ? 'end' : ''}}" style='box-sizing: border-box;border:{{item.b}}px solid {{item.bc}};border-radius:{{item.r}}px;background:{{item.bg}};word-wrap:break-word;white-space:normal;width:{{item.w}}px;line-height: {{item.lh*item.fs}}px;letter-spacing: {{item.sp}}px;text-align: {{item.ta}};font-family: {{item.f?item.f:sans-serif}};font-size:{{item.fs}}px;font-style:{{item.f}};font-weight:{{item.fw}};opacity:1;z-index: 1; display: block;color: {{item.c}};opacity: {{item.o}};'><text style="font-style: {{item.i=='t'?'italic':''}};text-decoration: {{item.td=='u'?'underline':item.td=='l'?'line-through':''}}">{{item.tx}}</text></view>
                        </view>

                       
                    </block>
                </view>
            </block>
        </view>
    </view>
</snapshot>



                    



循环数组生成的海报时,往往带有缝隙,不知道是不是snapshot 组件的问题,还是其他原因

最后一次编辑于  19小时前
回答关注问题邀请回答
收藏
登录 后发表内容