微信小程序简单输入框界面（实现选择标签功能）-编程知识

微信小程序简单输入框界面（实现选择标签功能）

微信小程序简单输入框界面，实现选择标签功能、输入框字数计数的简单界面功能。

输入框布局界面
1、js代码：

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代码：

<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代码：

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%;
}