master
wuxiang 3 years ago
parent 6d4097ded4
commit 2144ab19d2

@ -10,7 +10,12 @@
"pages/test/view",
"pages/test/text",
"pages/test/rich-text",
"pages/test/progress"
"pages/test/progress",
"pages/test/button",
"pages/test/checkbox",
"pages/test/input",
"pages/test/form",
"pages/test/picker"
],
"window": {
"backgroundTextStyle": "light",

@ -23,6 +23,16 @@ Page({
{title:'icon组件',url: "../test/icon"},
{title:'progress组件',url: "../test/progress"}
]
},
{
type:'表单',
pages:[
{title:'button组件',url: "../test/button"},
{title:'checkbox组件',url: "../test/checkbox"},
{title:'input组件',url: "../test/input"},
{title:'form组件',url: "../test/form"},
{title:'picker组件',url: "../test/picker"}
]
}
],
motto: 'Hello World',

@ -21,3 +21,6 @@
flex-direction: column;
justify-content: space-between;
}
button{
margin:10rpx;
}

@ -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,71 @@
// pages/test/input.js
Page({
/**
* 页面的初始数据
*/
data: {
},
onInput:function(e){
console.log('onInput触发输入框内容发生改变当前值为'+e.detail.value)
},
onBlur:function(e){
console.log('onBlur触发文本框失去焦点当前值为'+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,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…
Cancel
Save