收藏
回答

swiper 图片抖动问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug swiper 客户端 6.5.3 1.9.93

小程序顶部banner图在模拟环境中没有问题,但是发布之后,在真机中就一直抖动,如下图


<scroll-view style="width:100%;height:100%" scroll-y="true" bindscroll="scrollTopFun" scroll-with-animation="true" scroll-top="{{scrollTop}}">

<view class="page-section page-section-spacing" bindtap="goJnh">


<swiper  class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px" bindchange='bindchange' current="{{current}}" style="height:{{imgheights[current]}}rpx;">

<block wx:for="{{background}}" wx:key="*this">

<swiper-item>

<image mode="widthFix" src="{{item}}" bindload="imageLoad" data-index='{{index}}' class="slide-image" width="355" height="200" />

</swiper-item>

</block>

</swiper>

<text class="banner-text">国家AAAA级景区———金牛湖旅游度假区</text>

</view>



最后一次编辑于  07-01  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

4 个回答

  • 社区技术运营专员-白柿子
    社区技术运营专员-白柿子
    07-02

    微信以及基础库版本是这个吗?升级试下?

    07-02
    赞同
    回复 5
    • (°ー°〃)
      (°ー°〃)
      07-04

      这种问题,我也遇到过。。。。我猜测是不是  手指滑动幅度过小,或者是过快,导致出现这样的问题~  我出现的是,两张图卡在中间左右抖动。。

      07-04
      回复
    • 社区技术运营专员-白柿子
      社区技术运营专员-白柿子
      07-04回复(°ー°〃)

      目前该组件也在优化中,你的机型以及微信版本是?图片是否较大呢?

      07-04
      回复
    • (°ー°〃)
      (°ー°〃)
      07-04回复社区技术运营专员-白柿子

      不大,1344x750的,  打个广告😝,第三张图,发送到微信中,长按识别。 在小程序里,分享名片 -> 生成海报  ->    小白,你在这里 多滑动几次,可能会出现,但是出现频率还是有点高~



      07-04
      回复
    • 社区技术运营专员-白柿子
      社区技术运营专员-白柿子
      07-04回复(°ー°〃)

      复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)麻烦提供下?

      07-04
      回复
    • (°ー°〃)
      (°ー°〃)
      07-04回复社区技术运营专员-白柿子

      业务太多,独立出来太麻烦,体验版可不可搞?  wx8f090bf89da39235

      07-04
      回复
  • 韩先生
    韩先生
    09-23

    楼主问题解决了吗

    09-23
    赞同
    回复
  • 曾军
    曾军
    07-01

    JS代码:

    wx.request({//获取banner列表

    url: //隐藏。。

    method: "GET",

    header: {

    'Content-Type': 'json'

    },

    success: function (res) {

    that.setData({

    background: res.data.list,

    imgUrls: res.data.list

    })

    }

    })



    Page({

    data: {

    trafficList: [],

    ticketList: [],

    background: [],

    indicatorDots: true,

    vertical: false,

    autoplay: true,

    circular: false,

    interval: 2000,

    duration: 500,

    previousMargin: 0,

    nextMargin: 0,

    curPage: 1,

    current: 0,

    x: 0,

    hotelList:[],

    hotList:[],

    foodList:[],

    src: "",

    audioAction: {

    method: 'pause'

    },

    index: -1,

    navTop:0,

    navTop2: 10000,

    hotTop:0,

    footTop:0,

    hotelTop:0,

    ticketTop:0,

    trafficTop:0,

    showNavSelet:'hot',

    imgheights: [],


    imgUrls: [],

    swiperIndex: 0

    },

    onLoad: function () {

    let hotelList = [], hotList = [], that = this;

    wx.showLoading({

    title: '加载中',

    })



    07-01
    赞同
    回复
  • 亮子🔥
    亮子🔥
    07-01

    你看下你的js代码 是不是写的有问题呀  可能陷入了死循环中

    07-01
    赞同
    回复 2
    • 曾军
      曾军
      07-01

      可以请你看下吗

      07-01
      回复
    • 亮子🔥
      亮子🔥
      07-01回复曾军

      <image mode="widthFix" src="{{item}}" bindload="imageLoad" data-index='{{index}}' class="slide-image" width="355" height="200" />

      这样写宽高是有问题的  如果你要用Mode="widthFix"  应该写style="width:100%;height:0;" 具体是不是这里导致的  还不清楚

      07-01
      回复