微信小程序控件

1 scrollview

窗口view的滑动

<scroll-view scroll-y class='scroll-view-y' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrolltop}}">

</scroll-view>

2 swiper 滑块视图容器，通过手指对屏幕的滑动达到切换容器内容的效果

<block wx:for="{{imgUrls}}"> 这是一个循环体，imgUrls

<swiper-item>

<image src="{{item}}" class="slide-image"></image> 不断循环item将地址显示出来

</swiper-item>

</block>

</swiper>

const app = getApp()

Page({

/**

* 页面的初始数据

data: {

indicatorDots:true,

autoplay:true,

interval:5000,

duration:1000,

imgUrls: ['../../../images/tooopen_sy_143912755726.jpg', '../../../images/tooopen_sy_143912755726.jpg', '../../../images/tooopen_sy_143912755726.jpg']

changeIndicatorDots:function(e){

this.setData({

indicatorDots:!this.data.indicatorDots

})

changeAutoplay:function(e){

this.setData({

autoplay:!this.data.autoplay

})

intervalChange:function(e){

this.setData({

interval:e.detail.value

})

durationChange:function(e){

this.setData({

duration:e.detail.value

})

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

/**

* 生命周期函数--监听页面初次渲染完成

onReady: function () {

/**

* 生命周期函数--监听页面显示

onShow: function () {

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

/**

* 用户点击右上角分享

onShareAppMessage: function () {

}

})

按照以上代码之后，但是图片不显示。好吧，又一个坑，原来是app.wxss中有一句

align-items: center; 把这句删了，图片就显示出来了。原因是什么呢？继续度娘

w3cschool中有一句话

The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis.

根本原因是从句的内容，当子元素不需要使用交叉轴的所有空间时，才应该设置这个属性。
该属性默认的是stretch ，填充交叉轴的全部长度。如果设置其他属性，例如center，就需要显式地指定元素在交叉轴方向上的大小，或者有内容，否则元素就不会显示。相关链接地址 https://www.jianshu.com/p/1ef7decf9816

ICON组件

iconType: ['sucess', 'info', 'warn', 'waiting', 'safe_suceess', 'safe_warn', 'sucess_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'infoi_circle', 'cancel', 'search', 'clear']

text组件文本显示组件

progress 组件进度条组件