收藏
回答

使用swiper组件的next-margin时最后一页的右边显示空白是为什么?

使用swiper组件的next-margin时最后一页的右边显示空白是为什么?

回答关注问题邀请回答
收藏

2 个回答

  • at will
    at will
    06-14

    比较喜欢这种处理细节的楼主,我也遇到了这个问题,说下我的一个处理方案,仅供参考。

    我之前也是动态去改变nextMargin这个值,也会遇到你说的那个“视觉效果”问题,就是很明显没有动画效果了,但是后面处理了下,具体处理方案(Taro例子):

    // 生命周期初始化要调用一次
    this.getNextMargin();
    //...
    const { nextMargin } = this.state;
    //...
    onChange = (e: any) => {
      const {
        detail: { current }
      } = e;
      this.setState({ current }, this.getNextMargin);
    };
    //...
    // 间隔200这个可以控制一个合理的数值
    getNextMargin = () => {
      const { current, swiperList } = this.state;
      setTimeout(() => {
        this.setState({
          nextMargin: current === swiperList.length - 1 ? '30rpx' : '60rpx'
        });
      }, 200);
    };
    //...
    
    //...
    
    
    06-14
    有用
    回复
  • 王志鹏
    王志鹏
    2019-10-24

    因为加了next-margin啊  到最后一页next-margin = 0 就不会有吧

    2019-10-24
    有用
    回复 4
    • 😶
      😶
      2019-10-24
      但是我想他显示第一页的边怎么搞
      2019-10-24
      回复
    • 王志鹏
      王志鹏
      2019-10-24回复😶
      写个js 监听到最后一张的时候把第一张加后面  显示第一张的时候就移除加的哪一张正常显示
      2019-10-24
      回复
    • 😶
      😶
      2019-10-24回复王志鹏
      但是这样的话切换到第一张的时候显示会有问题,会有明显的视觉效果问题
      2019-10-24
      回复
    • 😶
      😶
      2019-10-24
      我看官方swpier的next-margin例子没我这个问题
      2019-10-24
      回复
登录 后发表内容
问题标签