首页 > 编程语言 >微信小程序--swiper轮播图出现抖动问题

微信小程序--swiper轮播图出现抖动问题

时间:2023-11-14 09:44:04浏览次数:39  
标签:轮播 source -- 微信 current 抖动 swiper

问题:在手机上,swiper的item一直在抖动,不滚动了。

官方:

 解决方案:(参考别人的文章,放在离自己的项目代码里)

wxml

<view class="swiperBox" style="{{defaultData.indicatorColors}}">
        <swiper
         class="slide-swiper"
         style="height:{{defaultData.bannerheight}}rpx;"
         indicator-dots="{{false}}"
         autoplay="{{true}}"
         interval="{{interval}}"
         duration="{{duration}}"
         indicator-color="{{defaultData.indicatorColor}}"
         indicator-active-color="{{defaultData.indicatorActiveColor}}"
         current="{{currentSwiper}}"
         bindchange="swiperChange"
        >
            <block wx:for="{{defaultData.src}}" wx:key="s_id">
                <swiper-item data-item="{{item}}">
                    <view class=" swiper-item">
                        <image class="swiper-item-img" src="{{item.imgUrl}}" mode="widthFix" />
                    </view>
                </swiper-item>
            </block>
        </swiper>
        <view class="dots {{defaultData.dotsType}}">
            <block wx:for="{{defaultData.src}}" wx:key="src">
                <view class="dot{{index == currentSwiper ? ' active' : ''}}" />
            </block>
        </view>
    </view>

js

methods: {
    swiperChange: function (e) {
      let { current, source } = e.detail
      if (source === 'autoplay' || source === 'touch') {
        this.setData({
          currentSwiper: current
        })
      }
    },
}

 

标签:轮播,source,--,微信,current,抖动,swiper
From: https://www.cnblogs.com/meiyanstar/p/17830915.html

相关文章

  • linux基础命令2
    Linuxrm命令Linuxrm(英文全拼:remove)命令用于删除一个文件或者目录。语法rm[options]name...参数:-i删除前逐一询问确认。-f即使原档案属性设为唯读,亦直接删除,无需逐一确认。-r将目录及以下之档案亦逐一删除。Linuxcat命令cat(英文全拼:concatenate)命令用于连接文......
  • Vue3实现图片滚轮缩放和拖拽
    在项目开发中遇到一个需求:1:用鼠标滚轮可对图片进行缩放处理2:点击按钮可对图片进行缩放处理3:可对图片进行拖拽处理 我在开发中通过自己实现与百度查看优秀的铁子进行了两种类型的使用  <template><divref="imgWrap"class="wrap"@mousewheel.prevent="rollImg"......
  • rancher安装及部署k8s
    一、安装docker参考:https://www.cnblogs.com/uestc2007/p/15598527.html二、安装rancher 1、Rancher概述rancher官方文档Rancher是一个Kubernetes管理工具,让你能在任何地方和任何提供商上部署和运行集群。Rancher可以创建来自Kubernetes托管服务提供商的集群,创建节......
  • wordpress SQL
     UPDATEwp_postsSETpost_content=REPLACE(post_content,"192.168.120.126:8000","计算机名:8000")  WHEREid=10 ;   修改ip地址后,导致图片失效 报语法错,跟mysql版本没有关系。   更改ip和切换主题都会导致文章排版和图片问题。有些主题是用markdown,有......
  • Cocos Creator中Component使用详解
    序言在CocosCreator游戏开发中,组件是使用是非常频繁,对于组件的入口函数、常用属性、组件的操作等,必须做到非常熟悉。一、组件入口函数1:onLoad:组件加载的时候调用,保证了你可以获取到场景中的其他节点,以及节点关联的资源数据2:start:也就是第一次执行update之前触发......
  • 在 Ubuntu 中置开机自启动一些常见的方案
    在Ubuntu中,有多种方法可以设置开机自启动。以下是一些常见的方案:使用systemd服务:使用systemd是一种现代的管理系统服务的方式。你可以创建一个.service文件,并将其放置在/etc/systemd/system/目录下,然后使用systemctl命令启用服务。sudonano/etc/systemd/system......
  • Java表达式引擎选型调研分析
    1简介我们项目组主要负责面向企业客户的业务系统,企业的需求往往是多样化且复杂的,对接不同企业时会有不同的定制化的业务模型和流程。我们在业务系统中使用表达式引擎,集中配置管理业务规则,并实现实时决策和计算,可以提高系统的灵活性和响应能力,从而更好地满足业务的需求。举个简......
  • 来来来,一文让你读懂Cocos Creator如何读写JSON文件
    前言在游戏开发过程中,读取配置文件是必不可少的,而使用JSON做配置文件又比较常见,本文重点给大家讲述如何在CocosCreator开发中读取和解析JSON数据文件以及如何写JSON文件。一、JSON简介1.什么是JSONJSON的英文全称是JavaScriptObjectNotation,即JavaScript对象表示法。2.J......
  • docker异常unable to add return rule in DOCKER-ISOLATION-STAGE-1 chain
    docker重装启动异常 INFO[2021-03-09T15:06:20.839195000+08:00]Loadingcontainers:start.INFO[2021-03-09T15:06:20.885624800+08:00]stoppingeventstreamfollowinggracefulshutdownerror="<nil>"module=libcontainerdnamespace=mobyINFO[2021-......
  • 2.OLTP和OLAP区别
    定义OLTP:联机事务处理(对数据的增删改,侧重实时性)OLAP:联机分析处理(对数据的查询,侧重大数据量查询)场景和应用的区别OLTP:当具体某类业务事件行为产生后,数据库会记录这个时间是谁在什么时候什么地方做了什么事,这样的一行(或多行)数据会以(增删改)的方式在数据库中进行数据的更......