首页 > 其他分享> 文章详细

组件——view、text、image、swiper（7）

2021-10-16 16:01:20 阅读：170 来源： 互联网

标签：原图轮播 text image 标签 swiper

开发文档

1. view标签

代替div标签使用，可选择如下属性进行使用
在这里插入图片描述

2.text标签

在小程序中，只有text能实现长按文字复制
text只能嵌套text自己
可以对特殊字符，空格，回车编码
在这里插入图片描述
decode为true，特殊字符会被解码，为false则原封不动的输出，如空格——&nbsp

3.图片

图⽚标签，image组件默认widch：320px、height：240px
图片转url路径可以随便搜一个图床网站
在这里插入图片描述

<image src="https://ftp.bmp.ovh/imgs/2019/12/a98809a1e6f29280.jpg"></image>
//此图片原来是200*100的，但image默认是320*240，所以想要缩放

image的mode属性可选值如下：
在这里插入图片描述
常用的mode模式有
scaleToFill（默认）：拉满image元素内部
aspectFit：长边拉满（宽高比不变），轮播图使用
aspectFill：短边拉满（宽高比不变），长边俩侧有一部分图片内容会消失
witchFix：指定一个宽度，image元素高度按比例改变（宽高比不变）

小程序的图片直接就支持懒加载，直接加标签lazy-load就行
当图片出现在视图框内，小程序才会自动加载图片
wxml

<image 
  src="https://ftp.bmp.ovh/imgs/2019/12/a98809a1e6f29280.jpg"
  mode="scaleToFill"
></image>
<image 
  src="https://ftp.bmp.ovh/imgs/2019/12/a98809a1e6f29280.jpg"
  mode="aspectFit"
></image>
<image 
  src="https://ftp.bmp.ovh/imgs/2019/12/a98809a1e6f29280.jpg"
  mode="widthFix"
></image>
<image 
  src="https://ftp.bmp.ovh/imgs/2019/12/a98809a1e6f29280.jpg"
  mode="top"
></image>

wxss

image{
  box-sizing: border-box;
  border:1px solid  brown;
  width: 300px;
  height: 200px;
}

在这里插入图片描述

4.swiper和swiper-item

轮播组件和轮播项
swiper标签存在默认样式：widch：100%，height：150
为了让轮播图好看点，最好是自己计算宽高
如：原图1125px352px，
swiper的宽/swiper的高=原图的宽/原图的高
所以，swiper的高=swiper的宽原图的高/原图的宽，即heigh=750rpx*352/1125
其他一些属性如下所示：
在这里插入图片描述

<swiper autoplay interval="2000" circular indicator-dots indicator-color="#009400" indicator-active-color="#995500">
  <swiper-item><image mode="widthFix" src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="  https://img.alicdn.com/imgextra/i4/1638292152/O1CN010LL9ht1Rlf0VPUfC7_!!1638292152-0-alimamazszw.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="https://gtms02.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg"></image></swiper-item>
</swiper>

在这里插入图片描述

标签：原图,轮播,text,image,标签,swiper
来源： https://blog.csdn.net/qq_42424228/article/details/120785808

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

组件——view、text、image、swiper（7）

1. view标签

2.text标签

3.图片

4.swiper和swiper-item