微信小程序轮播图swiper使用

这篇具有很好参考价值的文章主要介绍了微信小程序轮播图swiper使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章目录

一、swiper的作用？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

一、swiper？

小程序中创建轮播图。

二、使用步骤

1.引入代码

微信开放文档中组件--》视图容器--》swiper将下面代码拷贝

微信小程序swiper,微信小程序,微信小程序,小程序,前端

文章来源地址https://www.toymoban.com/news/detail-533194.html

2.修改代码

将代码粘贴至需要轮播图的页面，并根据实际情况修改代码

<view class="container">
  <swiper indicator-dots autoplay interval="{{2000}}">
        <block wx:for="{{tabList}}" wx:key="*this">
          <swiper-item class="swiper-item">
          <image src="{{item.img}}"></image>
          </swiper-item>
        </block>
      </swiper>
</view>

微信小程序swiper,微信小程序,微信小程序,小程序,前端

这里的tabList和img是根据接口传来的数据，需要在js中定义，这里定义的tabList通过onLoad方法，将接口传来的数据赋值给tabList

onLoad(){
    let _this=this;
    wx.request({
      url: 'http://localhost:8881/home/swiper', 
      data: {
      },
      method:"Get",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        _this.setData({
          tabList:res.data
        })
        console.log(res.data)
      }
    })

  },

微信小程序swiper,微信小程序,微信小程序,小程序,前端