一. 组件的定义及属性
1.1 语法格式如下：
< 标签名 属性名 = “属性值” > 内容.... < /标签名 >
id 组件的唯一表示，保持整个页面唯一，不常用
class 组件的样式类，对应 WXSS 中定义的样式
style 组件的内联样式，可以动态设置内联样式
hidden 组件是否显示，所有组件默认显示
data - * 组件触发事件时，会发送给事件处理函数
以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值
bind * / catch * 绑定逻辑层相关事件处理函数
1.2 容器视图组件
主要包括：view，scroll - view 和 swiper 组件
示例代码如下：
//scroll-view.wxml
1 <view class="container"style = "padding:0rpx">
2 <!--垂直滚动,这里必须设置高度 -->
3 <scroll -view scroll-top="||scrollTop||" scroll -y="true*
4 style= " height:||scrollHeight }l px;" class =" list" bind.
scrolltolower = "bindDownLoad"
bindscrolltoupper ="topLoad" bindscroll ="scroll">
5
6 <view class = "item"wx;for ="{{list}|">
7 <image class = "img"src ="{{item.pic_url|}"></image>
8 <view class = "text" >
9 < text class ="title">|{item.name| } < /text >
< text class = "description" >|{ item. short _de-
20
scription|| </text >
11 </view>
12 </view >
13 </scroll -view>
14 <view class="body-view" >
15 <loading hidden ="{ |hidden||"bindchange = "loadingChange">
16 加载中...
17 </loading >
18 </view >
19 </view >
2021
22 //scroll-view.js
23 var url ="http://www.imooc.com/course/ajaxlist";24 var page = 0;
25 var page_size =5;26 var sort ="last";27 var is_easy =0;28 var lange_id =0;29 var pos_id =0;30 var unlearn =0;
32 //请求数据
33 var loadMore =function(that){
34 that.setData({
35 hidden: false
36 1);
37 wx.request({38 url:url,39 data:{
40 page: page,
41 page_size: page_size,
42 sort: sort,
43 is_easy: is_easy,
44 lange_id: lange_id,
45 pos_id:pos_id,
46 unlearn: unlearn
47 }，
48 success: function(res){
49 //console.info(that.data.list);
50 var list = that.data.list;
51 for(var i = 0; i < res.data.list.length;i++){
52 list.push(res.data.list[i]);
53 }
54 that.setData(
55 list:list
56 });
57 page ++;
58 that.setData(l
59 hidden:true
60 });61 {62);63
64 Page({
65 data:{
66 hidden; true,
67 list:[]，
68 scrollTop:0,
69 scrollHeight:0
70 }，
71 onl oad: function(){
72 //这里要注意,微信的scroll -view必须设置高度才能监听滚动事件,所以需要在面的 onl oad事件中为scroll-view的高度赋值74 var that = this;75 wx.getSystemInfo({
76 success: function(res){
77 that.setData(l
78 scrollheight:res.windowHeight
79 1);
80 }
81 1);
82 loadMore(that);83 1，
84 //页面滑动到底部
85 bindDownLoad;function()!
86 var that = this;
87 loadMore(that);
88 console.log("lower");
89 },
90 scroll: function(event)
91 //该方法绑定了页面滚动时的事件,这里记录了当前的position.y的值,为了在请求数据后把页面定位到这里
93 this.setData(i
94 scrollTop: event.detail.scrolltop
95
96 },
97 topLoad: function(event)
98//该方法绑定了页面滑动到顶部的事件,然后做页面上拉刷新99 page =0;
100 this.setData(l
101 list:[]，
102 scrollTop:0
103 1);
104 loadMore(this);
105 console.log("lower");
106 }
107 1)
108 //scroll-view.wxss109.userinfol
110 display:flex;
111 flex - direction:column;
112 align - items:center;
113
115 .userinfo - avatar
116 width:128rpx;
117 height:128rpx;
118 margin:20rpx;
119 border -radius:50%:
120 }121
122.userinfo -nickname
123 color:#aaa:
124 }
126 .usermotto{
127 margin-top:200px;
128 }
130 /* */
132 scroll-view
133 width:100%;
134 }
136 .item{
137 width:90%;
138 height:300rpx;
139 margin:20rpxauto;
140 background;brown;
141 overflow:hidden;
142 }
143.item.img
144 width:430rpx:
145 margin -right:20rpx;
146 float:left;
147 }
148 .title{
149 font -size:30rpx:
150 display:block;
151 margin:30rpxauto;
152 }
153 .description
154 font -size:26rpx:
155 line -height:15rpx;
156 }
2.1 view 组件特有属性
代码如下：
<view style = "text-align:center">默认 flex 布局</view>
<view style = "display:flex">
<view style = "border:1px solid #f00; flex-grow:1"> 1 </view>
<view style = "border:1px solid #f00; flex-grow:1"> 2 </view>
<view style = "border:1px solid #f00; flex-grow:1"> 3 </view>
</view>
<view style = "text-align:center"> 上下混合布局 </view>
<view style = "display: flex;flex-direction:column">
<view style = "border:1px solid #f00;" > 1 </view>
<view style = "display:flex">
<view style = "border:lpx solid #f00;flex-grow:l"> 2 </view>
<view style = "border:1px solid #f00;flex-grow:2"> 3 </view>
</view>
</view>
<view style = "text-align:center"> 左右混合布局 </view>
<view style = "display:flex">
<view style = "border:lpx solid #f00;flex-grow:1"> 1 </view>
<view style = "display:flex; flex-direction:column; flex-grow:1">
<view style = "border:1px solid #f00; flex-grow:1"> 2 </view>
<view style = "border:lpx solid #f00; flex-grow:2"> 3 </view>
</view>
</view>
运行结果：
2.2 scroll - view 组件属性
示例代码如下：
//scroll-view.wxml
1 <view class="container"style = "padding:0rpx">
2 <!--垂直滚动,这里必须设置高度 -->
3 <scroll -view scroll-top="||scrollTop||" scroll -y="true*
4 style= " height:||scrollHeight }l px;" class =" list" bind.
scrolltolower = "bindDownLoad"
bindscrolltoupper ="topLoad" bindscroll ="scroll">
5
6 <view class = "item"wx;for ="{{list}|">
7 <image class = "img"src ="{{item.pic_url|}"></image>
8 <view class = "text" >
9 < text class ="title">|{item.name| } < /text >
< text class = "description" >|{ item. short _de-
20
scription|| </text >
11 </view>
12 </view >
13 </scroll -view>
14 <view class="body-view" >
15 <loading hidden ="{ |hidden||"bindchange = "loadingChange">
16 加载中...
17 </loading >
18 </view >
19 </view >
2021
22 //scroll-view.js
23 var url ="http://www.imooc.com/course/ajaxlist";24 var page = 0;
25 var page_size =5;26 var sort ="last";27 var is_easy =0;28 var lange_id =0;29 var pos_id =0;30 var unlearn =0;
32 //请求数据
33 var loadMore =function(that){
34 that.setData({
35 hidden: false
36 1);
37 wx.request({38 url:url,39 data:{
40 page: page,
41 page_size: page_size,
42 sort: sort,
43 is_easy: is_easy,
44 lange_id: lange_id,
45 pos_id:pos_id,
46 unlearn: unlearn
47
48 success: function(res){
49 //console.info(that.data.list);
50 var list = that.data.list;
51 for(var i = 0; i < res.data.list.length;i++){
52 list.push(res.data.list[i]);
53
54 that.setData(
55 list:list
56 |);
57 page ++;
58 that.setData(l
59 hidden:true
60 });61 |62 |);63
64 Page(|
65 data:{66 hidden; true,
67 list:[]，
68 scrollTop:0,
69 scrollHeight:0
70
71 onl oad: function()|
72 //这里要注意,微信的scroll -view必须设置高度才能监听滚动事件,所以需要在面的 onl oad事件中为scroll-view的高度赋值74 var that = this;75 wx.getSystemInfo({
76 success: function(res)|
77 that.setData(l
78 scrollheight:res.windowHeight
79 1);
80
81 1);
82 loadMore(that);83 1，
84 //页面滑动到底部
85 bindDownLoad;function()!
86 var that = this;
87 loadMore(that);
88 console.log("lower");
89
90 scroll: function(event )
91 //该方法绑定了页面滚动时的事件,这里记录了当前的position.y的值,为了在请求数据后把页面定位到这里
93 this.setData(i
94 scrollTop: event.detail.scrolltop
95
96 |.
97 topLoad: function(event )
98//该方法绑定了页面滑动到顶部的事件,然后做页面上拉刷新99 page =0;
100 this.setData(l
101 list:[]，
102 scrollTop:0
103 1);
104 loadMore(this);
105 console.log("lower");
106
107 1)
108 //scroll-view.wxss109 .userinfol
110 display:flex;
111 flex -direction:column;
112 align -items:center;
113
115 .userinfo -avatar
116 width:128rpx;
117 height:128rpx;
118 margin:20rpx;
119 border -radius:50%:
120 }121
122.userinfo -nickname
123 color:#aaa:
124 }
126 .usermotto{
127 margin-top:200px;
128 }
130 /* */
132 scroll-view
133 width:100%;
134 |
136 .item{
137 width:90%;
138 height:300rpx;
139 margin:20rpxauto;
140 background;brown;
141 overflow:hidden;
142 }
143.item.img
144 width:430rpx:
145 margin -right:20rpx;
146 float:left;
147 }
148 .title{
149 font -size:30rpx:
150 display:block;
151 margin:30rpxauto;
152
153 .description
154 font -size:26rpx:
155 line -height:15rpx;
156 }
因网址没用，无运行结果
2.3 swiper 组件属性
1.2 swiper
swiper 组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的 swiper 组件由 <swiper/> 和<swiper - item/>两个标签组成，不能单独使用
示例代码如下：
<swiper indicator-dots='true' autoplay='true' interval='5000' duration='1000'>
<swiper-item>
<image src="../image/bi.jpg" style="width: 100%"></image>
</swiper-item>
<swiper-item>
<image src="../image/hjk.jpg" style="width: 100%"></image>
</swiper-item>
<swiper-item>
<image src="../image/q.jpg" style="width: 100%"></image>
</swiper-item>
</swiper>
运行结果：
二. 基础内容组件
基础内容组件包括icon，text 和 progress，主要用在视图页面中展示图标、文本和进度条等信息
1.3 icon
icon组件即图标组件，通常用于表示一种状态
2.4 icon组件属性
示例代码如下：
<!--pages/leixin/leixin.wxml-->
<view> icon 类型:
<block wx:for="{{iconType}}">
<icon type ="{{item}}"/>{{item}}
</block>
</view>
<view> icon 大小:
<block wx:for="{{iconSize}}">
<icon type ="success" size ="{{item}}"/>{{item}}
</block>
</view>
<view> icon 颜色:
<block wx:for ="{{iconColor}}">
<icon type ="success" size ="30" color ="{{item}}"/>{{item}}
</block>
</view>// leixin.js
Page({
data:{
iconType:["success","success_no_circle","info","warn","wait-ing","cancel","download","search","clear"],
iconSize:[10,20,30,40],
iconColor:['#f00','#0f0','#00f']
}
})// leixin.json
{
"navigationBarBackgroundColor": "#FFFE91",
"navigationBarTitleText": "类型",
"navigationBarTextStyle":"black",
"usingComponents": {}
}
运行结果：
1.3 text
text 组件用于展示内容，类似 HTML 中的 <span>，属于行内元素
2.4 text 组件属性
示例代码如下：
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{25-x}}" wx:for-item="x">
<text decode="{{true}}"space="{{true}}"></text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=2*x-1}}">
<text>*</text>
</block>
</block>
</view>
</block>
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{39+x}}" wx:for-item="x">
<text decode="{{true}}"space="{{true}}"></text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=11-2*x}}">
<text>*</text>
</block>
</block>
</view>
</block>
运行结果：
1.4 progress
progress 组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等
progress 组件属于块级元素
2.5 progress组件属性
示例代码如下：
<view> 显示百分比 </view>
<progress percent = '80' show-info = '80'> </progress>
<view> 改变宽度 </view>
<progress percent = '50' stroke-width = '2'> </progress>
<view> 自动显示进度条 </view>
<progress percent = '80' active> </progress>
运行结果：
三. 表单组件
1.5 button
button 组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用
当 <button> 被 <form/> 包裹时，可以通过设置form - type属性来触发表单对应的事件
2.6 buttom组件属性
示例代码如下：
//button.wxml
<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bindtap='buttonSize' size="{{ size }}"> 改变 size </button>
<button type="default" bindtap='buttonPlain' plain="{{ plain }}"> 改变 plain </button>
<button type="default" bindtap='buttonLoading' loading="{{ loading }}"> 改变 loading 显示 </button>
//button.js
Page({
data:{
size: 'default',
plain: 'false',
loading: 'false'
},
buttonSize: function(){
if(this.data.size =="default")
this.setData({ size:'mini'})
else
this.setData({size:'default'})
},
buttonPlain: function(){
this.setData({ plain:! this.data.plain })},
buttonLoading: function(){
this.setData({ loading:! this.data.loading })
}
})
运行结果：
1.6 radio
radio 单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio- group/ > (单项选择器)和<radio/>(单选项目)两个组件组合而成
2.7 radio- group 及 radio 组件属性
示例代码如下：
//radio.wxml
<view>选择您喜爱的城市:</view >
<radio-group bindchange = "citychange">
<radio value ="西安"> 西安 </radio >
<radio value ="北京"> 北京 </radio >
<radio value ="上海"> 上海 </radio >
<radio value ="广州"> 广州 </radio >
<radio value ="深圳"> 深圳 </radio >
</radio-group>
<view>你的选择:{{city}}</view>
<view>选择您喜爱的计算机语言:</view >
<radio-group class ="radio-group" bindchange ="radiochange">
<label class = "radio" wx:for ="{{radios}}">
<radio value ="{{item.value}}" checked="{{item.checked}}"/>
{{item.name}}
</label >
</radio-group>
<view >你的选择:{{lang}} </view >//radio.js
Page({
data:{
radios:[
{ name:'java',value:'JAVA' },
{name:'python',value: 'Python',checked: 'true' },
{name:'php',value: 'PHP'},
{name:'swif',value:'swif'},
],
city:"",
lang:""
},
citychange: function(e){
this.setData({ city: e.detail.value });
},
radiochange: function(event){
this.setData({lang: event.detail.value});
console.log(event.detail.value)
}
})
运行结果：
1.7 checkbox
复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox - group/>(多项选择器)和< checkbox/>(多选项目)两个组件
2.8 checkbox-group 及 checkbox 组件属性
示例代码如下：
//checkobx.wxml
<view>选择您想去的城市:</view >
<checkbox-group bindchange="cityChange" >
<label wx:for="{{citys}}">
<checkbox value ="{{item.value}}" checked='{{item.checked}}'>{{item.value}}
</checkbox>
</label >
</checkbox-group>
<view >您的选择是:{{city}} </view >//checkbox.js
Page({
city:"",
data:
{
citys:[
{name: 'km',value:'昆明'},
{name: 'sy',value:'三亚'},
{name: 'zh',value:'珠海',checked:'true'},
{name: 'dl',value:'大连'}]
},
cityChange:function(e){
console.log(e.detail.value);
var city = e.detail.value;
this.setData({city:city})
}
})
运行结果：
1.8 switch
switch 组件的作用类似开关选择器
2.9 switch 组件属性
示例代码如下：
//switch.wxml
<view >
<switch bindchange="swl">{{var1}} </switch>
</view>
<view >
<switch checked bindchange="sw2">{{var2}} </switch>
</view >
<view >
<switch type ="checkbox" bindchange="sw3">{{var3}} </switch >
</view >//switch.wxml
Page({
data: {
var1:'关',
var2:'开',
var3:'未选'
},
swl:function(e){
this.setData({varl: e.detail.value ?'开':'关'})
},
sw2: function(e){
this.setData({var2: e.detail.value ?'开':'关'})
},
sw3: function(e){
this,setData({var3:e.detail.value ?'已选':'未选'})
}
})
运行结果：
1.9 slider
slider 组件为滑动选择器，可以通过滑动来设置相应的值
3.0 slider组件属性
示例代码如下：
//slider.wxml
<view> 默认min=0 max=100 step=1 </view >
<slider ></slider >
<view>显示当前值</view >
<slider show-value> </slider >
<view> 设置min=20 max=200 step=10 </view >
<slider min='0' max='200' step='10'show-value > </slider >
<view> 背景条红色,已选定颜色绿色 </view >
<slider color="#f00" selected-color='#0f0'> </slider >
<view > 滑动改变 icon 的大小 </view >
<slider show-value bindchange='sliderchange'> </slider >
<icon type ="success" size ='{{size}}'></icon >//slider.js
Page({
data: {
size:'20'
},
sliderchange:function(e){
this.setData({ size:e.detail.value})
}
})
运行结果：
2.0 picker
picker 组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择
picke组件目前支持5种选择器，分别是：selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器、region 省市选择器
1. 普通选择器 mode=selector
3.1 picker组件中selector选择器属性
示例代码如下：
//picker.js
Page({
data:{
array:['Java','Python','c','c#'],
objArray:[
{id:0,name: 'Java'},
{id:1,name: 'Python'},
{id:2,name: 'C'},
{id:3,name: 'C#'}
],
index1:0,
index2:0
},
arrayChange:function(e){
console.log(' picker 值变为', e.detail.value)
var index=0;
this.setData({
indexl:e.detail.value
})
},
objArrayChange: function(e){
console.log('picker值变为', e.detail.value)
this.setData({
index2: e.detail.value
})
}
})//picker.wxml
<view >--- range 为数组 ---</view >
<picker range="{{array}}" value="{{index1}}" bindchange='arrayChange'>
当前选择:{{array[index1]}}</picker >
<view>--- range为数组对象 ---</view>
<picker
bindchange="objArrayChange" value = "{{index2}}" range-key="name" range="{{objArray}}">
当前选择:{{objArray[index2].name}}
</picker >
运行结果：
2. 多列选择器 mode=multiSelector
允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象
3.2 picker 组件 multiSelector 选择器属性
示例代码如下：
//picker2.wxml
<view> 多列选择器 </view>
<picke rmode="multiSelector" bindchange="bindMultiPicker-Change"bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}">
<view >
当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multi-Index[1]]}},{{multiArray[2][multiIndex[2]]}}
</view >
</picker >//picker2.js
Page({
data:{
multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
multiIndex:[0,0,0]
},
//绑定 Multipicker
bindMultiPickerChange:function(e){
console.log('picker发送选择改变,携带值为',e.detail.value)
this.setData({
multiIndex:e.detail.value
})
},
//绑定 MultiPickerColumn
bindMultiPickerColumnChange: function(e){
console.log('修改的列为',e.detail.column,'值为',e.detail.value);
var data={
multiArray:this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detai1.column]=e.detail.value;
switch(e.detail.column){
case0:
switch(data.multiIndex[0]){
case0:
data.multiArray[1]=['西安市','汉中市','延安市'];
data.multiArray[2]=['雁塔区','长安区'];
break;
casel:
data.multiArray[1]=['深圳市','珠海市'];
data,multiArray[2]=['南山区','罗湖区'];
break;
}
data.multiIndex[1]=0;
data.multiIndex[2]=0;
break;
casel:
switch(data.multiIndex[0]){
case0:
switch(data.multiIndex[1]){
case0:
data.multiArray[2]=['雁塔区','长安区'];
break;
casel:
data.multiArray[2]=['汉台区','南郑区'];
break;
case2:
data.multiArray[2]=['宝塔区','子长县','延川县'];
break;
}
break;
casel:
switch(data.multiIndex[1]){
case0:
data.multiArray[2]=['南山区','罗湖区'];
break;
casel:
data.multiArray[2]=['香洲区','斗门区'];
break;
}
break;
}
data.multiIndex[2]=0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
})
3.3 picker 组件 time 选择器属性
3.4 picker 组件 date 选择器属性
示例代码如下：
//picker-datetime.js
Page({
data:{
startdate:2000,
enddate:2050,
date:'2018',
starttime:'00:00',
endtime:'12:59',
time:'8:00'
},
changedate: function(e){
this.setData({ date: e.detail.value});
console.log(e.detail.value)
},
changetime:function(e){
this,setData({time: e.detail.value})
console.log(e.detail.value)
}
})//picker-datetime.wxml
<view >
<picker mode="date" start="{{startdate}}" end="{{enddate}}"
value="{{date}}" bindchange="changedate" >
选择的日期:{{date}}
</picker >
</view >
<view>
<picker mode="time" start="{{starttime}}" end="{{endtime}}" bindchange="changetime" >
选择的时间:{{time}}
</picker >
</view >
运行结果：
3.5 picker 组件 region 选择器属性
示例代码如下：
//picker-region.wxml
<picker mode="region" value="{{region}}" custom-item="{{cust-omitem}}" bindchange ="changeregion" >
选择省市区:{{region[0]}},{{region[1]}},{{region[2]}}
</picker >//picker-region.js
Page({
data:{
region:['陕西省','西安市','长安区'],
customitem:'全部'
},
changeregion: function(e){
console.log(e.detail.value)
this.setData({
region:e.detail.value
})
}
})
运行结果：
2.1 picker-view
picker-view 组件为嵌入页面的滚动选择器
组件的列的个数和列的内容由用户通过 <picker-view-column/> 自定义设置
3.6 picker-view 组件属性
标签：function,value,item,组件,页面,data,setData From： https://blog.csdn.net/2301_79474431/article/details/136818106