微信小程序简单输入框界面,实现选择标签功能、输入框字数计数的简单界面功能。
1、js代码:
javascript
Page({
/**
* 页面的初始数据
*/
data: {
count: 500,
labelList: [{
text: '开心',
checked: true
}, {
text: '难受想哭',
checked: true
},
{
text: '快乐',
checked: false
}, {
text: '囧',
checked: false
},
{
text: '悲伤',
checked: false
}, {
text: '悲哀',
checked: true
},
{
text: 'emeo',
checked: false
}, {
text: '流汗',
checked: false
},
{
text: '悲痛欲绝',
checked: false
}, {
text: '加油',
checked: true
},
{
text: '沮丧',
checked: true
}, {
text: '努力',
checked: true
},
]
},
inputArea: function (e) {
let num = 500 - e.detail.value.length;
this.setData({
count: num < 0 ? 0 : num
});
},
//选择监听
selectClick(e) {
let inx = e.currentTarget.dataset.index;
let flag = this.data.labelList[inx].checked;
let check = 'labelList[' + inx + '].checked';
this.setData({
[check]: !flag
})
},
// 提交
sumbitClick(e) {
let formData = e.detail.value;
let list = this.data.labelList,
attr = [];
for (let i = 0; i < list.length; i++) {
if (list[i].checked) {
attr.push(list[i].text)
}
}
formData.label = attr;
// 接受的数据,具体根据自己需求写
},
})
2、wxml代码:
html
<form bindsubmit="sumbitClick">
<view class="box">
<view class="top-title">
<text class="title">标题</text>
<input name="title" class="weui-input" maxlength="30" auto-focus placeholder="好的标题更能引人注目~" />
</view>
<view class="bottom-box">
<text class="title">说点儿什么呢?</text>
<view class="area-text">
<textarea name="content" bind:input="inputArea" class="weui-input" maxlength="500" placeholder="分享你的好心情~" />
<view class="right">还可输入<text class="red"> {{count}} </text>字数</view>
</view>
</view>
<view class="bottom-box">
<text class="title">选择标签</text>
<view class="label-box">
<block wx:for="{{labelList}}" wx:key="item">
<text bindtap="selectClick" data-index="{{index}}" class="label {{item.checked?'select':''}}">{{item.text}}</text>
</block>
</view>
</view>
<button class="button" type="warn" form-type="submit">提交信息</button>
</view>
</form>
3、wxss代码:
css
page {
background-color: white;
}
.box {
margin: 20rpx;
}
.top-title {
margin-bottom: 20rpx;
border-bottom: 1rpx solid rgb(218, 217, 217);
}
.title {
font-size: 32rpx;
}
.weui-input {
padding: 15rpx 0;
font-size: 30rpx;
width: 100%;
}
.bottom-box {
margin-top: 10rpx;
}
.right {
display: flex;
flex-direction: row;
justify-content: flex-end;
font-size: 26rpx;
margin: 5rpx;
color: gray;
}
.red {
color: red;
}
.area-text {
margin-top: 20rpx;
border: 1rpx solid rgb(218, 217, 217);
padding: 5rpx 10rpx;
border-radius: 10rpx;
}
.label {
background-color: white;
color: rgb(255, 196, 0);
margin: 10rpx 25rpx 15rpx 0;
font-size: 28rpx;
padding: 5rpx 20rpx;
border-radius: 50rpx;
text-align: center;
border: 1rpx solid rgb(255, 196, 0);
}
.select {
background-color: rgb(255, 196, 0);
color: white;
}
.label-box {
margin-top: 10rpx;
flex-wrap: wrap;
display: inline-flex;
flex-direction: row;
}
.button {
border-radius: 50rpx;
text-align: center;
color: white;
font-size: 30rpx;
margin: 50rpx auto;
width: 90%;
}
布局简单,对于初学者可以用来看看,随便写的,如果出现运行异常,请使用真机预览呦~