微信小程序新手教程组件学习入门 _睿知

微信小程序新手教程组件学习入门，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

文章插图
微信小程序框架提供的基础组件有八类
一：视图容器 view Container
包括：
view 视图容器
scroll-view 可滚动视图容器
swiper 滑块视图容器
view：感觉跟html里的div对应，官方文档里给出的例子是：
flex-direction:row
flex-direction:column

但实现效果跟它给出的效果图不一致，style里的flex-direction设置并没有实现
scroll-view：各项属性
scroll-x：允许横向滚动
scroll-y：允许纵向滚动
upper-threshold：距顶部/左边多远时(px)，触发scrolltoupper事件
lower-threshold：距底部/右边多远时，触发scrolltolower事件
scroll-top：设置竖向滚动条位置
scroll-left：设置横向滚动条位置
scroll-into-view：值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper：滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolower：滚动到底部/右边，会触发scrolltolower事件
bindsroll：滚动时触发
使用竖向滚动时，需要给scroll-view一个固定高度
=======================================================================================
.wxml代码
vertical scroll
bindscroll="scroll" scroll-into-view="{{toView}}"scroll-top="{{scrollTop}}">
【微信小程序新手教程组件学习入门】click me to scroll into view
click me to scroll
.wxss代码
.bc_green{
background:green;
}
.bc_red{
background:red;
}
.bc_blue{
background:blue;
}
.bc_yellow{
background:yellow;
}
.scroll-view-item{
width:200px;
height:200px;
}
.scroll-view{
width:100%;
height:400px;
}
.js代码
var order=['red','yellow','green','blue','red']
Page({
data:{
toView:'red',
scrollTop:200
},
upper:function(e){
console.log(e)
},
lower:function(e){
console.log(e)
},
scroll:function(e){
console.log(e)
},
tap:function(e){
for(var i=0;i
if(order[i]==this.data.toView){
this.setData({
toView:order[i 1]
})
break
}
}
},
tapMove:function(e){
this.setData({
scrollTop:this.data.scrollTop 10
})
}
})
swiper滑块视图容器
属性：
indicator-dots：是否显示面板指示点(类似于我们做轮播那几个点击可切换的圆点)
autoplay：是否自动切换
current：当前所在页面的index
interval：自动切换时间间隔
duration：滑动动画时长
bindchange：current改变时会触发change事件
注意：其中只可放置swiper-item组件，其他节点会被自动删除
swiper-item仅可放置在swiper组件中，宽高自动设置为100%
把官方文档里的例子写出来发现，这个swiper滑块视图容器是可以用来做轮播图的
.wxml代码
duration="{{duration}}">
微信小程序新手教程组件学习入门

文章插图
indicaotr-dots
autoplay
interval
duration
.js代码
Page({
data:{
imgUrls:[
'../../img/7.jpeg',
'../../img/10.jpg'
],
indicatorDots:false,
autoplay:false,
interval:5000,
duration:1000
},
changeIndicatorDots:function(e){
this.setData({
indicatorDots:!this.data.indicatorDots
})
},
changeAutoplay:function(e){
this.setData({
autoplay:!this.data.autoplay