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

博客提供了微信小程序swiper组件官网地址,介绍了index.wxml文件中图片缩放方式mode属性,若不设置样式可能失效,还给出了mode相关属性官网,同时提到index.js文件,内容转载自特定博客。

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

官网地址: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

### 微信小程序实现长方形轮播图(swiper) 在微信小程序中创建一个具有视觉吸引力的长方形轮播图组件可以通过 `swiper` 组件完成。下面提供了一个具体的实例说明如何构建这样的功能。 #### 创建 Swiper 容器 首先,在页面对应的 WXML 文件里定义 Swiper 的结构: ```xml <view class="container"> <!-- 设置 swiper 样式 --> <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{3000}}" duration="{{500}}"> <block wx:for="{{imageUrls}}" wx:key="unique"> <swiper-item> <image src="{{item}}" class="slide-image" /> </swiper-item> </block> </swiper> </view> ``` 这段代码设置了自动播放、指示点以及切换动画时间等属性,并通过循环渲染图片列表中的每一项作为单独的滑动页[^1]。 #### 添加样式调整比例 为了使轮播图呈现为特定宽高比(例如长方形),可以在 WXSS 中加入自定义样式: ```css /* 设定容器宽度 */ .container { width: 100%; } .swiper-container { overflow: hidden; position: relative; } .slide-image { /* 自适应高度保持纵横比 */ width: 100%; height: auto; } ``` 这里的关键在于设置 `.slide-image` 类,它会根据父级元素大小自动调整尺寸以维持原始图像的比例不变。 #### 数据绑定与交互逻辑 最后一步是在 JS 文件中准备数据源并处理可能存在的用户互动行为: ```javascript Page({ data: { imageUrls: [ '/images/example1.jpg', '/images/example2.png', '/images/example3.gif' ] } }) ``` 此部分展示了如何向视图层传递一组图片 URL 来填充到 Swiper 内部;实际应用时可以根据需求动态加载网络资源或其他形式的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值