parent
6d4097ded4
commit
2144ab19d2
@ -0,0 +1,69 @@
|
||||
// pages/test/button.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
},
|
||||
getUserDetail:function(e){
|
||||
console.log(e.detail.userInfo)
|
||||
}
|
||||
})
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
@ -0,0 +1,16 @@
|
||||
<!--pages/test/button.wxml-->
|
||||
<text>pages/test/button.wxml</text>
|
||||
<view class="demobox">
|
||||
<view class="title">1.迷你按钮</view>
|
||||
<button type="primary" size="mini">主要按钮</button>
|
||||
<button type="default" size="mini">次要按钮</button>
|
||||
<button type="warn" size="mini">警告按钮</button>
|
||||
<view class="title">2.按钮状态</view>
|
||||
<button>普通按钮</button>
|
||||
<button disabled="ture">禁用按钮</button>
|
||||
<button loading="true">加载按钮</button>
|
||||
<view class="title">3.按钮单击监听</view>
|
||||
<button type="primary" bindgetuserinfo="getUserDetail" open-type="getUserInfo">点我试试</button>
|
||||
<button disabled="ture">禁用按钮</button>
|
||||
<button loading="true">加载按钮</button>
|
||||
</view>
|
@ -0,0 +1,4 @@
|
||||
/* pages/test/button.wxss */
|
||||
button{
|
||||
margin: 10rpx;
|
||||
}
|
@ -0,0 +1,75 @@
|
||||
// pages/test/checkbox.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
checkboxItem:[
|
||||
{name:'苹果', value:'Apple'},
|
||||
{name:'橙子', value:'Orange', checked:true},
|
||||
{name:'梨子', value:'Pear'},
|
||||
{name:'草莓', value:'Strawberry'},
|
||||
{name:'香蕉', value:'Banana'},
|
||||
{name:'葡萄', value:'Grape'}
|
||||
]
|
||||
},
|
||||
onChange:function(e){
|
||||
console.log(e.detail.value)
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
@ -0,0 +1,10 @@
|
||||
<!--pages/test/checkbox.wxml-->
|
||||
<text>pages/test/checkbox.wxml</text>
|
||||
<view class="demobox">
|
||||
<view class="title">使用数组批量生成选项</view>
|
||||
<checkbox-group bindchange="onChange">
|
||||
<view wx:for="{{checkboxItem}}" wx:key="index">
|
||||
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
</view>
|
@ -0,0 +1 @@
|
||||
/* pages/test/checkbox.wxss */
|
@ -0,0 +1,72 @@
|
||||
// pages/test/form.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
onSubmit:function(e){
|
||||
console.log('表单被提交');
|
||||
console.log(e.detail.value);
|
||||
},
|
||||
onReset:function(e){
|
||||
console.log('表单已被重置');
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
@ -0,0 +1,11 @@
|
||||
<!--pages/test/form.wxml-->
|
||||
<text>pages/test/form.wxml</text>
|
||||
<view class="demobox">
|
||||
<view class="title">模拟用户登录效果</view>
|
||||
<form bindsubmit="onSubmit" bindreset="onReset">
|
||||
<input name='username' type="text" placeholder="请输入用户名"/>
|
||||
<input name="password" password="true" placeholder="请输入密码"/>
|
||||
<button size="mini" form-type="submit">提交</button>
|
||||
<button size="mini" form-type="reset">重置</button>
|
||||
</form>
|
||||
</view>
|
@ -0,0 +1 @@
|
||||
/* pages/test/form.wxss */
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
<!--pages/test/input.wxml-->
|
||||
<text>pages/test/input.wxml</text>
|
||||
<view class="demobox">
|
||||
<view class="title">1.密码输入框</view>
|
||||
<input password="true" placeholder="请输入密码"/>
|
||||
<view class="title">2.最大字符长度限制为10</view>
|
||||
<input type="text" maxlength="10" placeholder="这里最多只能输入10个字符"/>
|
||||
<view class="title">3.禁用输入框</view>
|
||||
<input disabled="true" placeholder="该输入框已被禁用"/>
|
||||
<view class="title">4.自定义placeholder样式</view>
|
||||
<input placeholder-style="color:red;font-weight:bold" placeholder="自定义样式"/>
|
||||
<view class="title">5.输入框事件监听</view>
|
||||
<input bindinput="onInput" bindblur="onBlur" placeholder="这里输入内容将被监听"/>
|
||||
</view>
|
@ -0,0 +1 @@
|
||||
/* pages/test/input.wxss */
|
@ -0,0 +1,94 @@
|
||||
// pages/test/picker.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
selectorItems:['苹果','香蕉','葡萄'],
|
||||
multiSelectorItems:[['罗宋汤','蘑菇汤'],['牛排','猪排','鱼排'],['冰淇淋','鸡蛋布丁']]
|
||||
},
|
||||
onSelectorChange:function(e){
|
||||
let i=e.detail.value;
|
||||
let value=this.data.selectorItems[i];
|
||||
this.setData({selector:value})
|
||||
},
|
||||
onMultiSelectorChange:function(e){
|
||||
let indexs=e.detail.value;
|
||||
let items=this.data.multiSelectorItems;
|
||||
let values=new Array();
|
||||
for(let i=0;i<indexs.length;i++){
|
||||
let k=indexs[i];
|
||||
let v=items[i][k];
|
||||
values.push(v);
|
||||
}
|
||||
this.setData({multiSelector:values})
|
||||
},
|
||||
onTimeChange:function(e){
|
||||
let v=e.detail.value;
|
||||
this.setData({time:v});
|
||||
},
|
||||
onDateChange:function(e){
|
||||
let v=e.detail.value;
|
||||
this.setData({date:v});
|
||||
},
|
||||
onRegionChange:function(e){
|
||||
let v=e.detail.value;
|
||||
this.setData({region:v});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
@ -0,0 +1,32 @@
|
||||
<!--pages/test/picker.wxml-->
|
||||
<text>pages/test/picker.wxml</text>
|
||||
<view class="demobox">
|
||||
<view class="title">1.普通选择器</view>
|
||||
<picker mode="selector" range="{{selectorItems}}" bindchange="onSelectorChange">
|
||||
<view>当前选择:{{selector}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="demobox">
|
||||
<view class="title">2.多列选择器</view>
|
||||
<picker mode="multiSelector" range="{{multiSelectorItems}}" bindchange="onMultiSelectorChange">
|
||||
<view>当前选择:{{multiSelector}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="demobox">
|
||||
<view class="title">3.时间选择器</view>
|
||||
<picker mode="time" bindchange="onTimeChange">
|
||||
<view>当前选择:{{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="demobox">
|
||||
<view class="title">4.日期选择器</view>
|
||||
<picker mode="date" bindchange="onDateChange">
|
||||
<view>当前选择:{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="demobox">
|
||||
<view class="title">5.区域选择器</view>
|
||||
<picker mode="region" bindchange="onRegionChange">
|
||||
<view>当前选择:{{region}}</view>
|
||||
</picker>
|
||||
</view>
|
@ -0,0 +1 @@
|
||||
/* pages/test/picker.wxss */
|
Loading…
Reference in new issue