收藏
回答

swiper 图片抖动问题

框架类型 问题类型 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>



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

4 个回答

  • 韩先生
    韩先生
    2019-09-23

    楼主问题解决了吗

    2019-09-23
    有用
    回复
  • 是小白啊
    是小白啊
    2019-07-02

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

    2019-07-02
    有用
    回复 5
    • 2019-07-04

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

      2019-07-04
      回复
    • 是小白啊
      是小白啊
      2019-07-04回复

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

      2019-07-04
      回复
    • 2019-07-04回复是小白啊

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



      2019-07-04
      回复
    • 是小白啊
      是小白啊
      2019-07-04回复

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

      2019-07-04
      回复
    • 2019-07-04回复是小白啊

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

      2019-07-04
      回复
  • 曾军
    曾军
    2019-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: '加载中',

    })



    2019-07-01
    有用
    回复
  • 亮子🌞
    亮子🌞
    2019-07-01

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

    2019-07-01
    有用
    回复 2
    • 曾军
      曾军
      2019-07-01

      可以请你看下吗

      2019-07-01
      回复
    • 亮子🌞
      亮子🌞
      2019-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;" 具体是不是这里导致的  还不清楚

      2019-07-01
      回复
登录 后发表内容