微信小程序新手教程scroll-view组件swiper组件icon组件

微信小程序新手教程scroll-view组件 , swiper组件 , icon组件 , 本篇默认已经成功安装微信小程序工具 , 来和小编一起看看吧
一:scroll-view组件

微信小程序新手教程scroll-view组件swiper组件icon组件

文章插图
scroll-view为滚动视图 , 分为水平滚动和垂直滚动 。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效 。滚动视图常用的地方一般都是Item项比较多的界面 , 比如我的模块
主要属性:
微信小程序新手教程scroll-view组件swiper组件icon组件

文章插图
二:swiper组件
微信小程序新手教程scroll-view组件swiper组件icon组件

文章插图
Android 写过轮播图的痛楚只有写过的知道 , 相对还是比较麻烦的 , 并没有一个轮播图组件 , 有个ViewPage也需要自己定制 , iOS 则多用UIScrollerView去实现 , 这个swiper封装的相对还是方便的 , 使用方式也相对那俩容易些 。
主要属性:
微信小程序新手教程scroll-view组件swiper组件icon组件

文章插图
属性只需要设置就行了 也可以抽到js文件的data中进行数据绑定 , 监听使用bindchange , 在js中做业务处理 。
wxml
js:
Page({
data:{
// text:"这是一个页面"
},
/**
* 这里处理滚动事件处理
*/
listenSwiper:function(e) {
//打印信息
console.log(e)
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
三:icon组件
微信小程序新手教程scroll-view组件swiper组件icon组件

文章插图
这些是提供的所支持的图标样式 , 根据需求在此基础上去修改大小和颜色 。
主要属性:
微信小程序新手教程scroll-view组件swiper组件icon组件

文章插图
使用方式:
【微信小程序新手教程scroll-view组件swiper组件icon组件】wxml

    推荐阅读