下载鸥 > 网站下载 > 开发教程 > 小程序

微信小程序轮播图高度怎样按照比例自适应

329 2021-06-14 02:00:01

收藏
在常规的html网站,让轮播图高度自适应是很简单的。但到了微信小程序,轮播图高度自适应就需要开发。

微信小程序轮播图高度怎样按照比例自适应

微信小程序轮播图高度自适应wxml

<swiper indicator-dots="true" indicator-color="#fff" indicator-active-color="#9fc6ff" autoplay="true">
    <swiper-item><image class="banner" src="../static/images/banner1.jpg" alt="轮播1" style="height:{{height_swiper}}px"/></swiper-item>
    <swiper-item><image class="banner" src="../static/images/banner2.jpg" alt="轮播2" style="height:{{height_swiper}}px"/></swiper-item>
    <swiper-item><image class="banner" src="../static/images/banner3.jpg" alt="轮播3" style="height:{{height_swiper}}px"/></swiper-item>
</swiper>
 

微信小程序轮播图高度自适应js

var me=0;//代表当前页面的实例
var percent=414/150;//代表指定比例
Page({
  onShareAppMessage() {
    return {
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  },

  data: {
    height_swiper:0,
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: true,
    autoplay: true,
    interval: 100,
    duration: 500
  },

  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  },

  onLoad:function(options){
    me=this;
    wx.getSystemInfo({
      success: function(result) {
        console.info(result.windowWidth);
        me.data.height_swiper=result.windowWidth/percent;
        me.setData({
          height_swiper:me.data.height_swiper
        })
      },
    })
  },
  selected_class:function(et){
    //console.info(et.currentTarget.dataset.cindex);//取得绑定的cindex,而后赋值
    me.setData({
      cindex:et.currentTarget.dataset.cindex
    });
  },
  onReady:function(){

  }
})

这样,我们就实现了微信小程序轮播图片高度自适应的功能。从实际操作来看,还是比较麻烦的。其实,我们可以有一个更简单的方案,依托于微信原始组件即可完成,具体实现方式可查看本文:微信小程序让图片高度自适应的方法

本文地址:https://xzo.com.cn/develop/mini/1029.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于小程序

小程序开发

小程序开发与常规的网站开发差别比较大,其语言虽然源自html、css、js基础,在实际应用上又有比较大的差别。小程序入门不像从一个cms到另一个cms,如果一定要做一个比较,那么从一门语言到另一门语言可能更加恰当。
 

小程序应用

小程序上线3年来,技术日臻成熟,可广泛应用于各行各业。

推荐小程序开发教程
帝国cms怎样开发微信小程序?
帝国cms怎样开发微信小程序?

目前市面上的帝国cms站点很多,而且因为帝国cms优质的性能与安全性,用户是越来...

0 57
微信小程序轮播图高度怎样按照比例自适应
微信小程序轮播图高度怎样按照比例自适应

在常规的html网站,让轮播图高度自适应是很简单的。但到了微信小程序,轮播图高...

0 328
帝国CMS有必要开发百度小程序吗?
帝国CMS有必要开发百度小程序吗?

百度小程序的开放生态对网站站长及企业商家而言,能够从中获取到什么呢?百度智...

1 57
微信小程序让图片高度自适应的方法
微信小程序让图片高度自适应的方法

html代码中,图片高度如果设置为auto,则在不被其他属性替代的情况下,图片高度会...

0 412
微信小程序怎样做加载中的动画并自动隐藏?
微信小程序怎样做加载中的动画并自动隐藏?

微信小程序自带了加载中动画,免去了我们去开发的流程。那么,微信小程序的加载...

0 341
随机小程序开发教程
帝国cms怎样开发微信小程序?
帝国cms怎样开发微信小程序?

目前市面上的帝国cms站点很多,而且因为帝国cms优质的性能与安全性,用户是越来...

0 57
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入