微信小程序商城项目（篇2）：实现轮播效果（图片从后端获取）

最新推荐文章于 2023-01-03 19:14:14 发布

HaanLen

最新推荐文章于 2023-01-03 19:14:14 发布

阅读量1.6k

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_40119412/article/details/108437068

版权

微信小程序专栏收录该内容

16 篇文章 17 订阅

订阅专栏

效果演示

在这里插入图片描述

获取数据

    // 获取轮播图图片资源
    let promise1=getRequest('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata')
    promise1.then((res)=>{
      // console.log(res)
      this.setData({
        lunbo:res.data.message
      })
    })

将数据渲染到页面

<!-- 轮播区域 -->
    <view class="lunboArea">
        <swiper indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" interval="5000" bindchange="changeCurrent">
            <swiper-item wx:for="{{lunbo}}" wx:key="index">
                <image mode="widthFix" class="lunboPic" src="{{item.image_src}}" />
            </swiper-item>
        </swiper>
    </view>