微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

index.wxml文件

indicator-dots:是否显示面板指示点
autoplay:是否自动切换
interval:自动切换时间间隔
circular:是否采用衔接滑动
duration:滑动动画时长

更多属性请查看官网
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" duration="{{duration}}" class=‘hlzbsp‘>
      <block wx:for="{{phonelist}}" wx:for-item="item" wx:for-index="idx">
        <swiper-item>
           <image src="{{item.phoneurl}}" style=‘position: absolute;width:{{item.phoneWidth}}rpx; height:{{item.phoneheight}}rpx; top:{{item.top}}rpx; left: {{item.left}} rpx;‘ mode="aspectFit"></image>
        </swiper-item>
      </block>
    </swiper>

mode:图片缩放方式,如果不设置改属性,样式可能失效

mode相关属性官网:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

index.js文件

const app = getApp()
Page({
  data: {
    phonelist:[], //轮播图片列表
    indicatorDots: true,//是否显示面板指示点
    autoplay: true,//是否自动切换
    circular:true,//是否采用衔接滑动
    interval: 3000,//自动切换时间间隔
    duration: 1000,//滑动动画时长
  },

phone:function(){
//这里采用动态获取照片
   wx.request({
      url: ‘后台访问地址‘,
      header: {
        //设置参数内容类型为x-www-form-urlencoded
        ‘content-type‘: ‘application/x-www-form-urlencoded‘
      },
      method: ‘GET‘,
      success: function (res) {
        var list=[];//定义临时数组
        var phonecomment={};//定义临时对象
        //res.data.data.lsit是从后台拿到的数据,可根据后台传参获取 格式:[{id:1,photoDetails:aaa.jsp},{id:2,photoDetails:bbb.jsp},{id:3,photoDetails:ccc.jsp}]
        if (res.data.data.lsit.length>0){
          for (var i = 0; i < res.data.data.lsit.length; i++) {
            phonecomment={};//将临时对象赋值空
            phonecomment.phoneurl = res.data.data.lsit[i].photoDetails;//保存图片地址       //官方接口 获取图片信息
            wx.getImageInfo({
              src: res.data.data.lsit[i].photoDetails,//图片地址
              success: function (phone) {
                var originalWidth = phone.width;//返回该图片的宽
                var originalHeight = phone.height;//返回该图片的高

                var minwidth =670 /originalWidth;//670为轮播框的宽,670/originalWidth 是轮播框宽与图片宽比例
                var minheight = 380 / originalHeight;//380为轮播框的高 380/originalHeight 是轮播框高与图片高比例
                if (minwidth >= minheight){
                  phonecomment.phoneheight = originalHeight * minheight;//图片需要设置的高
                  phonecomment.phoneWidth = originalWidth * minheight;//图片需要设置的宽
                  phonecomment.top = (380 - originalHeight * minheight) / 2;//图片距离轮播框顶部的距离
                  phonecomment.left = (670 - originalWidth * minheight) / 2;//图片距离轮播框左边的距离
                  //phonecomment.top  phonecomment.left作用:图片居中
                }else{
                    phonecomment.phoneheight = originalHeight * minwidth;
                    phonecomment.phoneWidth  =originalWidth * minwidth;
                    phonecomment.top = (380 - originalHeight * minwidth) / 2;
                    phonecomment.left=(670 - originalWidth * minwidth) / 2;
                }
              },
              fail: function (res) {
                console.log("获取图片高宽失败");
              },
            })
            list.push(phonecomment);//将临时对象存放到临时数组中

          }
          console.log(list);
          that.setData({
            phonelist: list //赋值
          });

          console.log(list);
        }else{
          console.log("暂无轮播图片");
        }

      }
    })

}

})

原文地址:https://www.cnblogs.com/ttqi/p/10577184.html

时间: 2024-10-05 17:03:06

微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应的相关文章

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

微信小程序中-折线图

echarts配置项太多了,还是一点点积累吧~~~~~ 当然前提条件还是得老老实实看echarts官方文档 :https://echarts.baidu.com/ 今天主要就介绍下我在工作中通过echarts实现的微信小程序的折线图 Demo地址:https://gitee.com/v-Xie/echartsDemo.git 效果嘛如下: 通过此图分析得出需要实现以下几点:(主要配置代码请看后面部分) 1.标题(折线图)-title 需:颜色,文本,位置 2.图例(财运,感情,事业)-legen

微信小程序开发—快速掌握组件及API的方法---转载

微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支付等功能. 组件 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组件,再联想到这些组件会用在哪些产品的哪些功能.对于接口也是一样,整体了解,而不需要细看. 熟悉了文档的结构,

微信小程序(3)——常用的组件

view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class=

微信小程序开发05-日历组件的实现

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可: 1 let View = require('behavior-view'); 2 const util = require('../utils/util.js'); 3 4 // const dateUtil

微信小程序的初次认识(手机验证码登录+item列表)

微信小程序开发接触最多的文件应该是.wxml,.wxss,.js文件,他们类似于html,css,js的关系. 花了两天的时间学习并开发了这样两个界面的微信小程序 github地址:https://github.com/Jiangwr/wxwx 因为github仓库中没有给出接口,所以特此说明一下,其中列表的接口数据格式如下: { "opResult": 0, "opResultDes": "请求成功!", "opResultObj&q

手摸手教你微信小程序开发之自定义组件

前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢.可能你会去看官方文档,但是微信的官方文档也是说的不太清楚,所以写起来也是非常痛苦.今天就带大家手摸手开发微信组件,坐稳了,马路杀手要开车了. 具体实现 我们先实现个简单的弹窗组件,详情图如下: 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,

微信小程序怎样快速新建组件文件

在app.json中,page选项中设置即可, "pages": [ //放在第一行的配置,启动小程序时,会默认显示 "pages/haha/haha", // 这样配置,会在目录中生成一个haha的文件夹,并生成了对应的组件文件 "pages/testPage/testPage" ], 生成目录如下: 原文地址:https://www.cnblogs.com/luguankun/p/10887941.html

微信小程序中的自定义组件 以及 相关的坑

Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件,因此,我们在 components 组件中新建一个 home 文件夹来存放我们的弹窗组件,在 home 下右击新建 Component 并命名为 home 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时你的项目结构应该如下图所示: Step2 组

【微信小程序开发】 wxParse组件

简单介绍: wxParse是一个templet组件,Html代码转化成小程序的标签,目的是解决需要兼容手机端.小程序端的HTML内容. 文件有: html2json.js //将html每个标签转化成DOM对象的node htmlparse.js //由html2json.js引用 showdown.js //由wxParse.js引用 wxDiscode.js //支持的符号库 wxParse.js //主入口的js,和处理各种标签的事件,如图片的onload wxParse.wxml //不