1.常用的容器类组件的使用1.view组件的基本使用view类似于HTML中的div,实现了普通的视图区域。
例如:使用flex实现横向布局。
wxml代码:
wxss代码:
实现效果:
2.scroll-view组件的基本使用利用可以实现滚动的效果,这个效果可以是上下滚动,也可以是左右滚动。
wxml代码:
修改的wxss代码:
3.swiper和swiper-item组件的基本使用利用这两个组件可以实现轮播图效果:
wxml代码:
wxss代码:
实现效果:
属性类型默认值说明indicator-dotsbooleanfalse是否显示面板指示色indicator-colorcolorrgba(0,0,0,3)指示点颜色indicator-active-colorcolor#000000当前选中的指示点的颜色autoplaybooleanfalse是否自动切换intervalnumber5000自动切换时间间隔circularbooleanfalse是否采用衔接滑动
例:显示面板指示色:
采用衔接滑动:
2.常用的基础内容组件的使用1.text组件的基本使用例:通过 text 组件的user-select 属性,可以实现长按选中文本内容的效果。(之前使用的selectable已经被废弃!)
2.rich-text 组件的基本使用例:通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构。
在想要把HTML文档渲染为相应的UI结构时使用该组件。
3.其他常用的组件1.button组件的使用小程序中的按钮组件类似于HTML中的按钮组件,同时可以调用微信提供的丰富的功能,例如:获取用户信息,获取用户授权,转发等。
例:使用type属性设置按钮的类型:
例:使用size属性设置按钮的大小:
例:使用plain属性设置镂空按钮:
2.image组件的基本使用wxml代码:
wxss代码:
实现效果:
mode 值说明scaleToFill(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。asp