微信小程序实现轮播图（超简单）

女爷i 2021-12-09 07:03 1321阅读 0赞

**Tips**：微信小程序可以在HbuilderX用HTML标签（如Ddiv、span等）写前端代码，也可以用微信小程序语法写（view、swiper标签），然后npm run dev编译后，在微信开发者工具里面导入该项目，就可以调试项目，查看效果。

效果图：

![20190716161034857.png][]

微信小程序实现轮播图，本例是在\*.wpy页面开发（该页面的temlate内容对应小程序的wxml，style样式对应小程序的wxss，script对应小程序的js文件，config对应小程序的json文件）

<style type="less" scoped="scoped">
       .swiper image {
          width: 100%;
          height: auto;
      }
    
        .swiper-image {
          height: 100%;
          width: 100%;
        }
    
        .slide-image {
          height: 100%;
          width: 100%;
          display: block;
        }
    </style>
    <template>
         <view class="swiper">
            <swiper indicator-dots="{
       {indicatorDots}}" vertical="{
       {vertical}}" autoplay="{
       {autoplay}}" duration="{
       {duration}}" interval="{
       {interval}}" indicator-active-color="#007aff" bindchange="bindchange" circular="{
       {circular}}"
                style="height:{
       {imgheights[current]}}rpx;">
                <block wx:for="{
       {GoodsDatas.imgshow}}" wx:for-key="{
       {index}}" wx:for-item="image">
                   <swiper-item>
                        <image src="{
       {image.img}}" data-id="{
       {index}}" class="slide-image" mode="widthFix" bindload="imageLoad" />
                   </swiper-item>
                 </block>
             </swiper>
         </view>
    </template>
    <script>
      import wepy from '@wepy/core'
      wepy.page({
        data: {
          circular: true,
          //是否显示画板指示点，根据图片数量自动生成多少个圆点
          indicatorDots: true,
          //选中点的颜色
          //是否竖直
          vertical: false,
          //是否自动切换
          autoplay: true,
          //自动切换的间隔
          interval: 3000,
          //滑动动画时长毫秒
          duration: 1000,
          //所有图片的高度
          imgheights: [],
          //图片宽度
          imgwidth: 320,
          //默认
          current: 0
        },
        imageLoad: function(e) { //获取图片真实宽度
          var imgwidth = e.detail.width,
            imgheight = e.detail.height,
            //宽高比
            ratio = imgwidth / imgheight;
          console.log(imgwidth, imgheight)
          //计算的高度值
          var viewHeight = 750 / ratio;
          var imgheight = viewHeight;
          var imgheights = this.data.imgheights;
          //把每一张图片的对应的高度记录到数组里
          imgheights[e.target.dataset.id] = imgheight;
          this.setData({
            imgheights: imgheights
          })
        },
        bindchange: function(e) {
          // console.log(e.detail.current)
          this.setData({
            current: e.detail.current
          })
        }
      })
    </script>

将代码粘过去之后，只需要修改循环对象为图片数据就可以了。

[20190716161034857.png]: /images/20211208/8587478329fe4eb1b3d74e9c33d6033a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1321人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序轮播图代码

微信小程序轮播图的代码如下：首先，在小程序的 wxml 文件中，添加如下代码：  <swiper class="swiper"

深藏阁楼爱情的钟/ 2024年03月27日 12:20/ 0 赞/ 79 阅读

相关微信小程序：轮播图

> 基础知识： > > swiper标签存在默认的宽度和高度：100% \ 150px > > `swiper` 高度无法实现由内容撑开 > > 先找出来

我不是女神ヾ/ 2023年02月19日 10:25/ 0 赞/ 12 阅读

相关微信小程序五（创建轮播图）

应用中最常见的就是轮播图了，今儿个就讲讲微信小程序中轮播图的使用轮播图，不外乎俩个要素，跳转链接和图片地址 1. 设置数据我在 pages/test/test

爱被打了一巴掌/ 2022年07月16日 06:23/ 0 赞/ 217 阅读

相关微信小程序开发一swiper轮播图的简单实现

swiper是温馨小程序里面提供实现轮播图效果的一个的很好的组件，使用非常简单。下面直接看我的代码 ![Center][] data: \{ imgU

一时失言乱红尘/ 2022年06月15日 06:18/ 0 赞/ 181 阅读

相关三分钟实现微信小程序轮播图

生命不息,代码不止. 在Android的项目完成后,接下来的半个月,要完成一款配套的微信小程序. 那就开始动手呗. 小程序的轮播图可比Android的简单多了,官方直接给

心已赠人/ 2022年05月28日 03:40/ 0 赞/ 254 阅读

相关微信小程序实现图片轮播

![70][] wxml页面代码：  <view class='swipercontainer'> <swiper in

今天药忘吃喽~/ 2022年05月08日 09:44/ 0 赞/ 280 阅读

相关微信小程序写一个轮播图

微信小程序写轮播图，在微信开发者文档中，已经给了我们组件容器`<swiper>`，我们把需要轮播的东西放到`<swiper>`下的`<swiper-item>`中。附

Bertha 。/ 2021年12月12日 03:37/ 0 赞/ 373 阅读

相关微信小程序实现轮播图（超简单）

Tips：微信小程序可以在HbuilderX用HTML标签（如Ddiv、span等）写前端代码，也可以用微信小程序语法写（view、swiper标签），然后npm run de

女爷i/ 2021年12月09日 07:03/ 0 赞/ 1322 阅读

相关微信小程序学习：（三）轮播图

微信小程序学习：（三）轮播图项目地址：[https://github.com/leoricding/-][https_github.com_leoricding_-]

谁借莪１个温暖的怀抱￠/ 2021年12月04日 00:37/ 0 赞/ 317 阅读

相关微信小程序轮播图组件swiper

在官网文档->组件->视图容器查找具体内容 <swiper 滑块视图容器,其中只可放置swiper-item组件,否则会导致未定义的行为。

Love The Way You Lie/ 2021年07月24日 23:14/ 0 赞/ 584 阅读