微信小程序实现banner图轮播（动态获取数据），自动获取图片高度

朱雀 2022-03-26 15:53 332阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70][]

indicator-active-color="\#007aff"//当前选中的指示点颜色

js:

const app = getApp()
    
    Page({
      data: {
         //-----------模拟banner图-----------
        imgUrls: [
          '/image/1545118381903.jpg',
          '/image/1545118566631.jpg'
        ],
        circular: true,
        //是否显示画板指示点  
        indicatorDots: true,
        //选中点的颜色  
        //是否竖直  
        vertical: false,
        //是否自动切换  
        autoplay: true,
        //自动切换的间隔
        interval: 3000,
        //滑动动画时长毫秒  
        duration: 1000,
        //所有图片的高度  
        imgheights: [],
        //图片宽度 
        imgwidth: 750,
        //默认  
        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 })
      },
       }
    })

wxml:

<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='{
       {imgUrls}}' wx:key="{
       {index}}">
          <swiper-item>
            <image src="{
       {item}}" data-id='{
       {index}}' class="slide-image" mode="widthFix" bindload="imageLoad" />
          </swiper-item>
        </block>
      </swiper>
    </view>

wxss:

.swiper image {
      width: 100%;
      height: auto;
    }
    
    .swiper-image {
      height: 100%;
      width: 100%;
    }
    
    .slide-image {
      height: 100%;
      width: 100%;
      display: block;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70]: /images/20220326/7a70f7bf08d449d78ef43e8f81dd6c7d.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 Android通过Banner获取网络图片实现轮播图

1、在Module的build.gradle文件导入依赖 //banner implementation 'com.youth.banner:ba

逃离我推掉我的手/ 2024年03月23日 15:15/ 0 赞/ 149 阅读

相关微信小程序：轮播图

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

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

相关微信小程序之轮播图(附带图片)

微信小程序之轮播图 > 大家好，今天我们来学习一下使用微信小程序的轮播图，好好看，好好学，超详细的。第一步 > 首先，我们来了解一下微信小程序轮播图的组件，进入

川长思鸟来/ 2022年12月21日 03:15/ 0 赞/ 424 阅读

相关获取微信小程序元素高度

获取微信小程序元素高度 let query = wx.createSelectorQuery(); query.select('backgroundI

川长思鸟来/ 2022年11月12日 01:58/ 0 赞/ 259 阅读

相关微信小程序轮播图片

轮播图片的实现使用swiper实现图片轮播功能 -------------------- 一、效果展示 ![在这里插入图片描述][20210718222522

深藏阁楼爱情的钟/ 2022年08月30日 04:12/ 0 赞/ 339 阅读

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

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

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

相关微信小程序实现banner图轮播（动态获取数据），自动获取图片高度

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

朱雀/ 2022年03月26日 15:53/ 0 赞/ 333 阅读

相关自动轮播banner图

Html代码： <div class="banner"> <img src="images/c.jpg"> <img src="images

太过爱你忘了你带给我的痛/ 2022年02月17日 08:09/ 0 赞/ 340 阅读

相关微信小程序swiper轮播图高度自适应

说明：swiper默认高度150px，且无法更改。解决办法： wxml中：注意 style=‘height:\{ \{Height\}\}’、mode="widthFi

痛定思痛。/ 2022年01月20日 15:07/ 0 赞/ 485 阅读