微信小程序 图片宽度自适应的实现

 微信小程序 图片宽度自适应的实现

实例代码：

wxml 代码：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="image">
   <swiper-item>
     <image src="{{item.image}}" model="aspectFit" style="width: {{imageWidth}}px;" bindload="imageLoad" />
   </swiper-item>
  </block>
</swiper>

  JS 代码：

imageLoad: function () {
  this.setData({
   imageWidth: wx.getSystemInfoSync().windowWidth,//图片宽度 

   imgUrls: [
     { image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" },
   { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" },
   { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }],
   indicatorDots: false,//是否显示圆点
  autoplay: true,//自动播放
  interval: 2000,//间隔时间
  duration: 1000//监听滚动和点击事件
 })
}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序图片选择、上传到服务器、预览（PHP）实现实例

    微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo

  • 微信小程序 图片加载（本地，网路）实例详解

    微信小程序 图片加载（本地，网路）实例详解

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.

  • 微信小程序 图片上传实例详解

    微信小程序 图片上传实例详解

    一.了解wx.chooseImage(OBJECT) 二.代码编程 在pages文件里面创建uploadimg文件夹 1.编写页面结构:uploadimg.wxml <view class="container" style="padding:1rem;"> <button type="primary"bindtap="chooseimage">获取图片</button> <image

  • 微信小程序 图片绝对定位(背景图片)

    微信小程序 图片绝对定位 前言: 在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满.使用背景图片的话,一般使用一些新的view层,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的

  • 微信小程序开发图片拖拽实例详解

    微信小程序开发图片拖拽实例详解

    微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序选择图片和放大预览图片功能

    微信小程序选择图片和放大预览图片功能

    视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: { avatarUrl:null }, 首先在数据中定义接收数据的变量,然后调用方法选择图片,将图片显示出来. bindViewTap:function(){ var that = this; wx.chooseImage({ // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了, c

  • 微信小程序 图片宽度自适应的实现

     微信小程序 图片宽度自适应的实现 实例代码: wxml 代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="image&

  • 微信小程序图片自适应支持多图实例详解

    微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

  • 微信小程序 图片宽高自适应详解

    微信小程序 图片宽高自适应 1.以前将小程序图片宽度设置为屏幕宽度: imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) } 2.现在: .imgClass{ width: 100vw; } 解析: CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 "vw"="view width"&qu

  • 微信小程序图片自适应实现解析

    这篇文章主要介绍了微信小程序图片自适应实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 关于微信小程序图片自适应的做法 在日常业务场景中,很多地方都需要图片进行列表的显示,但是这样就存在一个问题,由于每张上传的图片规格并不是一样的,就会发生图片要么过大,要么过小,或者被拉伸的情况,如下图 对于这个情况,我的思路是可以使用image标签内的bindload属性进行计算,bindload属性的介绍如下 下面就是具体的方法流程 1.首先我们在页

  • 微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放（图片自适应屏幕）

    微信小程序 图片等比例缩放 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放. 上代码: 1.index.wxml <!--index.wxml--> <

  • 微信小程序使用canvas自适应屏幕画海报并保存图片功能

    小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢? 我们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667: 那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可: 获取系统屏幕尺寸 先利用wx.getSystemInfo (获取系统信息)的API获取屏幕宽度,然后除iPhone6的屏幕宽度,即可得到相对单位 // 在onLoad中调用 const

  • 微信小程序图片选择区域裁剪实现方法

    微信小程序图片选择区域裁剪实现方法

    本文介绍了微信小程序图片选择区域屏裁剪实现方法,分享给大家.具体如下: 效果图 HTML代码 <view class="index_all_box"> <view class="imgCut_header"> <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view> <view class="imgCut_header_

  • 微信小程序图片横向左右滑动案例

    微信小程序图片横向左右滑动案例

    本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下 图片左右滑动效果图: wxml代码: <scroll-view scroll-x="true"> <view class="uploadWrap" scroll-x="true"> <view class="upload_Item"> <image class="upload_Item_img&q

随机推荐