1.组件的基本使用
<button
type="default"> default</button><button
type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary</button>
效果
详细组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
2.数据绑定
设置data数据
绑定text标签
现在我们通过一个按钮再写一个简单的小事例来动态改变数据
这是我的文件目录
接下来我们再index.wxml中插入一个按钮并绑定事件
<button
type="primary" bindtap="changename">
现在我们去index.js中写入这个事件
changename:function(){
console.log(this.data.myname)
varnewname = 'dahlin'this.setData({ myname: newname})
}
效果
标签中的渲染判断处理，微信小程序的试图容器都支持if的真假判断
{{myname}}
把花括号的true改成false时
这里我们用也用简单的按钮来做一个显示隐藏的小事例（点击时隐藏再点击又出现）
1.设置参数show
2.设置点击按钮并绑定事件
置入按钮
type="warn" bindtap='changestate'>状态{{show}}
编写changestate方法
changestate:function(){
this.setData({show:!this.data.show})
}
3.渲染标签
在微信小程序中的渲染标签有
这里我们使用一下swiper滑块做一个轮播案例
将这段代码置入顶部
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="{{5000}}" duration="{{500}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150"/></swiper-item></block></swiper>
swiper的属性参数说明
indicator-dotsbooleanfalse否是否显示面板指示点1.00
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
currentnumber0否当前所在滑块的 index1.0.0
intervalnumber5000否自动切换时间间隔1.0.0
durationnumber500否滑动动画时长1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0
verticalbooleanfalse否滑动方向是否为纵向1.0.0
previous-marginstring"0px"否前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值1.9.0
next-marginstring"0px"否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值1.9.0
display-multiple-itemsnumber1否同时显示的滑块数量1.9.0
skip-hidden-item-layoutbooleanfalse否是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息1.9.0
easing-functionstring"default"否指定 swiper 切换缓动动画类型2.6.5
bindchangeeventhandle 否current 改变时会触发 change 事件，event.detail = {current, source}1.0.0
bindtransitioneventhandle 否swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle 否动画结束时会触发 animationfinish 事件，event.detail 同上1.9.0
js设置滑块图片路径源
效果
4.模板的使用
