Question

JS放大元素与缩小元素？

<scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" onScroll="scroll" >
<block a:for="{{items}}" >
<view id="blue2" class="scroll-view-item_H bc_blue" style="background-color: {{items[index]}}; transform:scale({{scale}},{{scale}})"> </view>
</block>
</scroll-view>
这是一个axml文件,,循环了四个内容,是一个可以滑动的盒子,我可以得到每一次滑动的左距

我如何用JS控制放大与缩小?比如在左距100的时候 第二个元素就放大1倍,其他元素缩小,并是慢慢缩小 指定元素慢慢放大
目前写了一个JS可以全部慢慢方法或者全部慢慢缩小
this.setData({ scale:Math.abs(1-(e.detail.scrollLeft/1000 )).toFixed(5) })
//e.detail.scrollLeft(每一次的位置信息居左),简单来说就是一个滑动盒子做成T台效果

Answer 1

讲一下大致思路吧，希望能帮到你

• 通常来说，元素id要求是唯一的，虽然不唯一也不会报错，但可能导致代码得不到你想要的效果。你在for循环里面定义了 id="blue2" 这是不合理的。

• 你不能在每个元素上统一设置 transform, 因为这样的话一变全都变了，区分不了。

• for循环你能拿到索引 index，你可以根据index拿到当前展示的元素，那么 通过 index+1就能拿到下一个元素。注意，需要判断是否存在下一个元素

• 针对当前元素做缩小处理，下一个元素做放大处理。el.style.transform = 'scale()'

小程序的开发和原生js多多少少还是有些区别的，具体的情况需要你自己调试了。