收藏
回答

swiper调用animation导致swiper-item自动垂直布局,如何更改?

基础库2.24.7 ,在去掉animation的时候swiper显示一切正常

wxml
<view class="container {{isMask === true ? 'mask-blur':''}}">
    <swiper current="{{currentBannerIndex}}" bindchange="handleChangeBanner" next-margin="60rpx" previous-margin="60rpx" class="swiper">
            <swiper-item wx:for="{{list}}" wx:key="id" animation="{{currentBannerIndex == index ? animationSelected : animationNoSelected}}">
            <view class="swiper-item-view">
                <text class="addtime">{{item.addTime}}</text>
                <view class="swiper-item" bindtap="gopriview" data-item="{{item}}">
                    <image src="{{item.bookCover}}" class="scrollImage"></image>
                    <text>{{item.projectIntroduce}}</text>
                </view>
            </view>
            </swiper-item>
    </swiper>
</view>
                
            
    

js
Page({
  data: {
    list: [
      {
        projectIntroduce"text1",
        addTime"123",
        bookCover:
          "//obsa.arsnowslide.com/195360628956909568/244552849175306240.jpg",
      },
      {
        projectIntroduce"text1",
        addTime"123",
        bookCover:
          "//obsa.arsnowslide.com/195360628956909568/244552849175306240.jpg",
      },
    ],
    title"历史记录",
    isMaskfalse,
    borchureDetail: {},
    animationSelected: {},
    animationNoSelected: {},
    currentBannerIndex0,
  },


  onLoad(options) {},


  handleChangeBanner(e) {
    if (e.detail.source !== "touch"return;
    this.setData({
      currentBannerIndex: e.detail.current,
    });
    console.log(this.data.currentBannerIndex);
    this.enlarge();
    this.shrink();
  },
  enlarge() {
    console.log("enlarge");


    let animationSelected = wx.createAnimation({
      duration1000,
      timingFunction"ease",
    });
    animationSelected.scale(1.21.2).step();
    this.setData({
      animationSelected: animationSelected.export(),
    });
  },
  shrink() {
    console.log("shrink");
    let animationNoSelected = wx.createAnimation({
      duration1000,
      timingFunction"ease",
    });
    animationNoSelected.scale(11).step();
    this.setData({
      animationNoSelected: animationNoSelected.export(),
    });
  },
  onShow() {
    this.enlarge();
    this.shrink();
  },
});



less


.container {
  width100%;
  height100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  .swiper {
    margin-top201rpx;
    width100%;
    height100%;
    display: flex;
    .swiper-item-view{
      display: flex;
      flex-direction: column;
      align-items: center;
      .addtime {
        color#fff;
        z-index99;
      }
      .swiper-item {
        .scrollImage {
          margin-top54rpx;
          border-radius20rpx;
          width500rpx;
          height700rpx;
        }
        text {
          margin-top25rpx;
          font-size30rpx;
          font-family: PingFang SC;
          font-weight500;
          color#020202;
          line-height48rpx;
        }
        width613rpx;
        height923rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
       
      }
    }
  }
}







最后一次编辑于  2022-07-05
回答关注问题邀请回答
收藏

3 个回答

  • 茜茜又困了🐽
    茜茜又困了🐽
    2022-07-05

    你是想为swiper设置动画还是为swiper-item设置动画?

    2022-07-05
    有用 3
    回复 7
    • 偏执狂
      偏执狂
      2022-07-05
      为swiper设置动画,在onshow和current改变后调用动画
      2022-07-05
      回复
    • 茜茜又困了🐽
      茜茜又困了🐽
      2022-07-05回复偏执狂
      为swiper包裹一层view,animation属性绑定到外层view上
      2022-07-05
      回复
    • 偏执狂
      偏执狂
      2022-07-05回复茜茜又困了🐽
      animation属性需要for循环的index做三元表达式,绑定在外层获取不了index
      2022-07-05
      回复
    • 茜茜又困了🐽
      茜茜又困了🐽
      2022-07-05回复偏执狂
      2022-07-05
      1
      回复
    • 偏执狂
      偏执狂
      2022-07-05回复茜茜又困了🐽
      听我说谢谢你
      2022-07-05
      回复
    查看更多(2)
  • 跨商通
    跨商通
    2022-07-05

    1、暂时建议样式不要放在swiper-item上,放在子元素的view上。

    2022-07-05
    有用
    回复 4
    • 偏执狂
      偏执狂
      2022-07-05
      已经把swiper-item的样式调整到新建的子元素的view中,但目前没有效果
      2022-07-05
      回复
    • 跨商通
      跨商通
      2022-07-05回复偏执狂
      那还建议更新上面代码,或者创建一个代码片段。
      2022-07-05
      回复
    • 跨商通
      跨商通
      2022-07-05回复跨商通
      另外,去掉animation是否正常,这些也需要专门说明一下,不要等别人来一问你一答。
      2022-07-05
      1
      回复
    • 偏执狂
      偏执狂
      2022-07-05回复跨商通
      好的,代码更新了,去掉animation是正常的,如果不在onshow中调用,则不会一开始就垂直布局,直到swiper调用了animation后才会变成垂直
      2022-07-05
      回复
  • 偏执狂
    偏执狂
    2022-07-05

    如果不在swiper中绑定handleChangeBanner的话一切正常

    2022-07-05
    有用
    回复
登录 后发表内容