建设培训网站,提供专业网站建设,微信小程序怎么收费,网站建设首先要选择题写在前面
小程序中的组件也是由宿主环境提供的#xff0c;开发者可以基于组件快速搭建出漂亮的页面结构。 官方把小程序的组件分为了9大类#xff0c;分别是: 1.视图容器 2.基础内容 3.表单组件 4.导航组件 5.媒体组件 6.地图组件 7.画布组件 …写在前面
小程序中的组件也是由宿主环境提供的开发者可以基于组件快速搭建出漂亮的页面结构。 官方把小程序的组件分为了9大类分别是: 1.视图容器 2.基础内容 3.表单组件 4.导航组件 5.媒体组件 6.地图组件 7.画布组件 8.开放能力 9.无障碍访问现只举例部分常用组件大部分可以看官方文档组件部分不再做过多赘述。
文章目录写在前面1. view 组件2. text 组件3. image 组件4. button 组件5. swiper 和 swiper-item 组件1. view 组件 在小程序中,通常使用view/代替div/作为容器来做布局 !--pages/welcome/welcome.wxml--
view classcontainerimage classavatar src/images/测试.jpg/imagetextHello/text!-- button微信小程序/button --viewtext微信小程序/text/view
/view2. text 组件 ⽂本标签 只能嵌套text ⻓按⽂字可以复制只有该标签有这个功能–selectable 可以对如: 空格回车nbsp; 进⾏编码 --decode
属性名类型默认值说明selectableBooleanfalse⽂本是否可选decodeBooleanfalse是否解码
例通过 text 组件的user-select 属性可以实现长按选中文本内容的效果。
view
长按可以选中文本内容:
text user-selectHelloWorld!/text
/view3. image 组件 图⽚标签image组件默认宽度320px、⾼度240px,所以如果不进行宽高设置,不会进行自适应 ⽀持懒加载
属性名类型默认值说明srcString图⽚资源地址modeStringscaleToFill图⽚裁剪、缩放的模式lazy-loadBooleanfalse图⽚懒加载
mode模式列举:
模式值说明缩放scaleToFill不保持纵横⽐缩放图⽚使图⽚的宽⾼完全拉伸⾄填满image 元素缩放aspectFit保持纵横⽐缩放图⽚使图⽚的⻓边能完全显⽰出来。缩放aspectFill保持纵横⽐缩放图⽚只保证图⽚的短边能完全显⽰出来缩放widthFix宽度不变⾼度⾃动变化保持原图宽⾼⽐不变裁剪top不缩放图⽚只显⽰图⽚的顶部区域裁剪bottom不缩放图⽚只显⽰图⽚的底部区域裁剪center不缩放图⽚只显⽰图⽚的中间区域裁剪left不缩放图⽚只显⽰图⽚的左边区域裁剪right不缩放图⽚只显⽰图⽚的右边区域裁剪top left、top rightbottom left、bottom right不缩放图⽚,只显示值所指向区域
代码示例: image classavatar modeaspectFit src/images/测试.jpg/image4. button 组件 小程序中的按钮组件类似于HTML中的按钮组件同时可以调用微信提供的丰富的功能例如获取用户信息获取用户授权转发等。 例使用type属性设置按钮的类型
button 默认按钮/button
button typeprimary主色调按钮/button
button typewarn警告按钮/button例使用size属性设置按钮的大小
button sizemini默认按钮/button
button typeprimary sizemini主色调按钮/button
button typewarn sizemini警告按钮/button例使用plain属性设置镂空按钮
button plain默认按钮/button
button typeprimary plain主色调按钮/button
button typewarn plain警告按钮/button5. swiper 和 swiper-item 组件
利用这两个组件可以实现轮播图效果
wxml代码:
swiper classswiper-container
swiper-item
view classitemA/view
/swiper-item
swiper-itemview classitemB/view
/swiper-item
swiper-itemview classitemC/view
/swiper-item
/swiperwxss代码
.swiper-container{height:150px;
}
.item{height:100%;line-height: 150px;text-align: center;
}swiper-item:nth-child(1) .item{background-color: aquamarine;
}
swiper-item:nth-child(2) .item{background-color: azure;
}
swiper-item:nth-child(3) .item{background-color: darkorange;
}实现效果 swiper组件的常用属性
属性类型默认值说明indicator-dotsbooleanfalse是否显示面板指示色indicator-colorcolorrgba(0,0,0,3)指示点颜色indicator-active-colorcolor#000000当前选中的指示点的颜色autoplaybooleanfalse是否自动切换intervalnumber5000自动切换时间间隔circularbooleanfalse是否采用衔接滑动
例显示面板指示色
swiper classswiper-container indicator-dotstrue 例指定指示点颜色和当前选中知识点颜色
swiper classswiper-container indicator-dotstrue indicator-colorwhite indicator-active-colorred例设置自动切换间隔设置为1s
swiper classswiper-container indicator-dotstrue indicator-colorwhite indicator-active-colorred autoplaytrue interval1000采用衔接滑动
swiper classswiper-container indicator-dotstrue indicator-colorwhite indicator-active-colorred autoplaytrue interval1000 circular
