微信小程序轮播图

最新推荐文章于 2025-02-27 12:44:32 发布

一只快乐的蓝胖纸

最新推荐文章于 2025-02-27 12:44:32 发布

阅读量470

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_44543219/article/details/106215671

小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了微信小程序中如何使用swiper组件创建轮播图，包括swiper组件与swiper-item的用法，轮播图的布局设置，wx.request的使用方法，以及在实际应用中需要注意的属性和技巧，如autoplay、indicator-dots等，并提供了示例接口地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、了解swiper组件
Swiper 组件作用：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
swiper-item ：仅可放置在swiper组件中，宽高自动设置为100%。

2、Swiper组件的使用

轮播图布局设置：

<!-- 轮播图 -->
  <view class="index_swiper"> 
    <swiper autoplay indicator-dots circular>
     <swiper-item wx:for="{{swiperlist}}" wx:key="goods_id">
      <navigator> 
        <image mode="widthFix" src="{{item.image_src}}"/>
      </navigator> 
     </swiper-item> 
    </swiper> 
  </view>

3、wx.request发起 HTTPS 网络请求

//同时发送异步代码的次数（考虑同步请求的情况）
let ajaxTimes=0;
export const request =(params)=>{
    let header={...params.header};
    ajaxTimes++;
    //显示加载中效果
    wx.showLoading({ title: '加载中',mask:true})
    //定义共工的url
  const baseurl="https://api-hmugo-web.itheima.net/api/public/v1";
    return new Promise((resolve,reject)=>{
        var reqTask = wx.request({
          ...params,header,
          url:baseurl+params.url,
            success: (result) => {
              resolve(result.data.message);
            },
            fail: (err) => {reject(err);},
            complete:()=>{
                ajaxTimes--;
                wx.hideLoading();
            }
        });
     })
}

4、使用请求引用
（1）定义请求方法，引用请求

//引入 用来发送请求的方法 一定要把路径补全
import { request} from "../../request/index.js";

Page({  
  data: {
    //轮播图数组
    swiperlist:[]
    },
  onLoad: function(options) {
     this.getSwiperList();//获取轮播数据
  },
  //获取轮播数据
  getSwiperList(){
    request({url:"/home/swiperdata"})
    .then(result=>{
      this.setData({
          swiperlist:result
      })
    })
  }
});

（2）直接使用请求

Page({  
data: {
      swiperlist:[] //轮播图数组
    },
  onLoad: function(options) {  
  var reqTask = wx.request({  //异步请求数据
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success: (result) => {
        this.setData({swiperlist:result.data.message})
      }
    });
}
});

5、使用注意事项与技巧：
(1) swiper标签存在默认的宽高 100%150px
(2) Swiper属性

① autoplay ：是否自动切换
② indicator-dots：是否显示面板指示点
③ Current：当前所在滑块的 index
④ 具体其他属性可查看文档

(3) image标签也存在默认的宽高 320px240px
(4) 设计图片的轮播

① 先看一下原图的宽高 750*340
② 让图片的高度自适应宽100%
③ 让swiper标签的高等于图片的高