微信小程序轮播图片自适应[通俗易懂]

全栈程序员-站长 • 2022年5月11日上午9:20 • 未分类 • 阅读 34

微信小程序轮播图片自适应[通俗易懂]微信小程序轮播图片自适应//xml代码<viewclass=”rotation”><swiperclass=”home-swiper”bindchange=”bindchange”style=”height:{{imgheights[current]}}rpx;”><blockwx:for-items=”{{lunboData}}”wx:key=”{{index}}”><swiper-item>

大家好，又见面了，我是你们的朋友全栈君。

微信小程序轮播图片自适应

//xml代码
<view class="rotation">
  <swiper class="home-swiper" 
  bindchange="bindchange"
  style="height:{ 
   {imgheights[current]}}rpx;">
    <block wx:for-items="{ 
   {lunboData}}" wx:key="{ 
   {index}}">
      <swiper-item>
        <image data-id="{ 
   {index}}" mode="widthFix" src="{ 
   {item.imgurl}}" class="slide-image" bindload="imageLoad"/>
      </swiper-item>
    </block>
  </swiper>
</view>


//js代码
Page({ 
   
	data: { 
   
		//图片数组
		lunboData:[{ 
   "id": 1,"imgurl": "https://img0.baidu.com/it/u=1271409927,137799855&fm=26&fmt=auto&gp=0.jpg"},{ 
   "id": 2,"imgurl": "https://img0.baidu.com/it/u=1611101153,494459479&fm=26&fmt=auto&gp=0.jpg"},{ 
   "id": 3,"imgurl": "https://img1.baidu.com/it/u=3847739212,936584275&fm=26&fmt=auto&gp=0.jpg"},{ 
   "id": 4,"imgurl": "https://img2.baidu.com/it/u=3808973942,1442731276&fm=224&fmt=auto&gp=0.jpg"}],
	    //所有图片的高度 
	    imgheights: [],
	    //图片宽度 
	    imgwidth: 750,
	    //默认 
	    current:0,
	}
})


//wxss代码
.slide-image { 
   
  width: 100%;
  height: 100%;
}

效果展示

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143272.html原文链接：https://javaforall.net

小程序微信

赞 (0)

全栈程序员-站长

0 0

idea

DataGrip 2021.11.4激活码【2021免费激活】[通俗易懂]

(DataGrip 2021.11.4激活码)JetBrains旗下有多款编译器工具（如：IntelliJ、WebStorm、PyCharm等）在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上，过去15年以来，JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

全栈程序员-站长
2022年3月30日
73
python进阶（6）深拷贝和浅拷贝[通俗易懂]

python进阶（6）深拷贝和浅拷贝[通俗易懂]深拷贝和浅拷贝不管对于浅拷贝、还是深拷贝，针对不可变对象str、int、tuple(有点特殊)、boolean，它的内存地址是不变的，拷贝的仅仅是值importcopya=1b=co

全栈程序员-站长
2022年7月30日
8
Pytest（16）随机执行测试用例pytest-random-order[通俗易懂]

Pytest（16）随机执行测试用例pytest-random-order[通俗易懂]前言通常我们认为每个测试用例都是相互独立的，因此需要保证测试结果不依赖于测试顺序，以不同的顺序运行测试用例，可以得到相同的结果。pytest默认运行用例的顺序是按模块和用例命名的ASCII编码

全栈程序员-站长
2022年7月29日
7
C语言fread函数_C语言fread

C语言fread函数_C语言freadc语言中fread函数C语言中的fread()函数(fread()functioninC)Prototype:原型：size_tfread(void*buffer,size_tlength,size_tcount,FILE*filename);Parameters:参数：void*buffer,size_tlength,si…

全栈程序员-站长
2025年11月4日
2
connectionStrings 元素[通俗易懂]

connectionStrings 元素[通俗易懂].NETFramework常规参考connectionStrings元素（ASP.NET设置架构）为ASP.NET应用程序和ASP.NET功能指定数据库连接字符串（名称/值对的形式）的集合。此元素是.NETFramework2.0版中的新元素。configuration元素（常规设置架构）connectionStrings元素…

全栈程序员-站长
2022年5月22日
41
深度学习模型压缩与优化加速（Model Compression and Acceleration Overview）

深度学习模型压缩与优化加速（Model Compression and Acceleration Overview）1.简介深度学习（DeepLearning）因其计算复杂度或参数冗余，在一些场景和设备上限制了相应的模型部署，需要借助模型压缩、优化加速、异构计算等方法突破瓶颈。模型压缩算法能够有效降低参数冗余，从而减少存储占用、通信带宽和计算复杂度，有助于深度学习的应用部署，具体可划分为如下几种方法（后续重点介绍剪枝与量化）：线性或非线性量化：1/2bits,int8和fp16等；结构或…

全栈程序员-站长
2022年9月27日
4

发表回复

关注全栈程序员社区公众号