uni-app swiper数量过多时卡顿优化方案，微信小程序swiper优化

swiper数量达到大约400+时候会出现明显滑动卡顿，渲染慢的问题，达到1000+时候需要几十秒时间，或者可能导致渲染失败。

配置 circular="true" 属性开启衔接滑动，即播放到末尾后重新回到开头。然后固定用于展示的swiper-item只设置3个，当滑动时候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。

//页面源码

1、swiper-item的key一定要设置，并且用 index 。

2、如果只有一张情况，不想让它来回滚动。可以设置 circular ，但是 circular 无法直接动态设置，我们可以使用 computed 来设置

>

swiper组件的常用属性

属性     类型 默认值 说明

indicator-dots     boolean false 是否显示面板指示点

indicator-color    color rgba(0,0,0,3) 指示点颜色

indicator-active-color   color #O000oo 当前选中的指示点颜色

autoplay     boolean false 是否自动切换

interval      number 5000    自动切换时间间隔

circular     boolean false    是否采用衔接滑动`

二、按钮

通过type属性指定按钮颜色类型

<button>普通按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button>

size="mini" 小尺寸按钮同一行

<button size="mini">普通按钮</button>

<button type="primary" size="mini">主色调按钮</button>

<button type="warn" size="mini">警告按钮</button>

plain 镂空按钮

<button plain>普通按钮</button>

<button type="primary" plain>主色调按钮</button>

<button type="warn" plain>警告按钮</button>

  data: {

    inputVal : '',

    storageVal:''

  },

  bindkeyInput: function (e) {

    let {detail: { value }  } = e;

    thissetData({

      inputVal: value

    })

  },

  cun:function(){

    let arr=['name','age','sex'];

    let i =Mathfloor(Mathrandom()(2-0+1)+0);

    / 异步取缓存的值必须在回调函数里面取 同的直接=即可 /

    wxsetStorage({

      key:'myname',

      data:'我是小超人',

      success:function(){

        consolelog('我成功了');

      }

    })

    / 同步的存起来 /

    / 相同的key会把值覆盖 /

    / wxsetStorageSync('username', thisdatainputVal) /

    wxsetStorageSync(arr[i],thisdatainputVal)

  },

  qu:function(){

    thissetData({

      / 同步的取缓存的值 /

      / 浏览器中的缓存存进去的都是字符串，小程序里的缓存可以存字符串，数组和对象 /

      / undefined存进去是字符串 null存进去是null类型 Symbol存进去是Symbol类型 /

      / storageVal:wxgetStorageSync('username') /

       storageVal:wxgetStorageSync('sex')

    })

  },

  delSex:function(){

    / 同步删除指定的某一个缓存 /

    wxremoveStorageSync('sex')

  },

  delAll:function(){

    wxclearStorageSync()

  },

以上就是关于uni-app swiper数量过多时卡顿优化方案，微信小程序swiper优化全部的内容，包括:uni-app swiper数量过多时卡顿优化方案，微信小程序swiper优化、ios微信小程序上下滑动效果、微信小程序3缓存与循环等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！