<!--setting.wxml-->
<view class="wrapper">
<form>
<view class="ground">
<text class="info">孩子生日</text>
<picker mode="date" value="{{date}}" bindchange="bindDateChange">
<view class="picker-show">
{{date}}
</view>
</picker>
<view class="right-arrow">
<image mode="aspectFit" src="../../images/icon/right_arrow@3x.png"></image>
</view>
</view>
<view class="ground">
<text class="info">性别</text>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio">
<radio name="sex" color="#3acebb" value="0" />男
</label>
<label class="radio">
<radio name="sex" color="#3acebb" value="1" />女
</label>
</radio-group>
</view>
<view class="group">
<view class="title">兴趣</view>
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{taste}}">
<checkbox value="{{item}}" checked="{{item.checked}}"/>{{item}}
</label>
</checkbox-group>
</view>
<view class="btn-area">
<button class="btn-primary" hover-class="btn-primary-hover" formType="submit">确 定</button>
</view>
</form>
</view>
|
/* setting.wxss */
.ground{
display: flex;
margin: 0 50rpx;
padding: 30rpx 0;
border-bottom: 1rpx solid #eeeeee;
}
.ground picker{
flex: 1;
height: 50rpx;
line-height: 50rpx;
text-align: right;
}
.picker-show{
height: 50rpx;
width: 100%;
}
.ground .info{
width: 200rpx;
}
.right-arrow{
width: 40rpx;
height: 40rpx;
}
.right-arrow image{
width: 40rpx;
height: 40rpx;
vertical-align: middle;
}
.ground .radio-group{
flex: 1;
text-align: right;
}
.radio-group .radio{
margin-right: 30rpx;
}
.group{
margin: 0 50rpx;
padding: 30rpx 0;
border-bottom: 1rpx solid #eeeeee;
}
.group checkbox-group{
margin-top: 50rpx;
}
.group .title {
width: 100%;
height: 30rpx;
}
.group .checkbox{
display: inline-block;
margin-right: 30rpx;
margin-bottom: 20rpx;
}
.btn-area{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height:92rpx;
}
|
// setting.js
Page({
/**
* 页面的初始数据
*/
data: {
data: '年/月/日',
taste: ['现代文学', '童话寓言', '生活常识', '旅游地理', '自然科学', '历史人文', '社会科学', '品格修养', '体育', '艺术', '科技', '古文诗词', '国学经典'] //兴趣爱好
},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
模板简介：该模板名称为【微信小程序树芽读书个人信息兴趣选择页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
