微信小程序多标签选择和添加标签

与我之前相关的一个标签的博客（时间选择标签）：

https://blog.csdn.net/weixin_42418774/article/details/98747230

今天我来说说进阶标签的选择和添加标签：

首先我们看到wxml页面布局：

wxml:<view class='btn_view'><text>标签：</text><block wx:for="{{obtnArry}}" ><view class='label_view {{item.selected ? "active" : ""}}' data-value="{{item.name}}" bindtap='dealTap' checked="{{item.selected}}" data-index="{{index}}">{{item.name}}</view></block><van-popup show="{{ show }}" bind:close="onClose" close-on-click-overlay="{{false}}" overlay="false"><view class="input_view"><text>请输入标签：</text><input class="input" placeholder="最多输入5个字" maxlength="5" bindinput="bindValue"></input><!-- <view class="btn"> --><button catchtap="onInputValue" class="determine_button">确定</button><button catchtap="onCancel" class="determine_button1">取消</button><!-- </view> --></view></van-popup><image bindtap='addinput' class="img" src="/imgs/jia.png" ></image></view>

wxss:(布局样式仅供参考，你可以有更好的优化代码)

.determine_button{background: #ff784a;color: white;border-radius: 10rpx;height: 60rpx;line-height:60rpx;position: fixed;bottom: 5rpx;left: 8rpx;width: 46%;
}
.determine_button1{background: #ff784a;color: white;border-radius: 10rpx;height: 60rpx;line-height:60rpx;position: fixed;bottom: 5rpx;right: 8rpx;width: 46%;
}
.label_view{display: flex;justify-content: center;align-items: center;padding: 1rpx 10rpx;width: 140rpx;height: 50rpx;border: 1rpx solid rgb(114, 107, 107);font-size: 26rpx;border-radius: 12rpx;color: rgb(114, 107, 107);margin-right: 5rpx;margin-top: 15rpx;
}
.btn_view{margin: 10rpx 15rpx;font-size: 26rpx;color: rgb(99, 95, 95);width: 700rpx;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;
}
.btn_view text{display: flex;align-items: center;
}
.active{background: #ff784a;border: 1rpx solid rgb(255, 253, 253);
}
.btn_view .img{margin-top: 8rpx;width: 65rpx;height: 65rpx;
}
.input_view{font-size: 28rpx;width: 400rpx;height: 270rpx;margin: 20rpx 20rpx;
}
.input{margin-top: 20rpx;margin-left: 22rpx;width: 350rpx;border: 1px #aaa solid
}

最后就是主要的js代码了：

data定义|：

js:
//同步输入框内容bindKeyInput(e) {this.setData({albumName: e.detail.value})},
// 选择标签并输入到label数组中dealTap:function(e){  let string = "obtnArry[" + e.target.dataset.index + "].selected";// const checkedicon = "obtnArry[" + e.target.dataset.index + "].selected"; console.log(!this.data.obtnArry[e.target.dataset.index].selected);this.setData({[string]: !this.data.obtnArry[e.target.dataset.index].selected})let detailValue = this.data.obtnArry.filter(it => it.selected).map(it => it.name)this.setData({label: detailValue})console.log(this.data.label)},addinput(e){this.setData({ show: true,});},
//关闭弹出层，但是我这里有取消按钮，所以这个没用了//onClose() {// this.setData({ show: false });// },//实时获取输入框的值bindValue(e){this.setData({inputValue: e.detail.value})},
//确定按钮，添加数组达到添加标签的作用onInputValue(){this.setData({ show: false ,inputValue: this.data.inputValue});var obtnArry = this.data.obtnArry;console.log(this.data.inputValue)var newData = { num: obtnArry.length, name: this.data.inputValue, selected: false };obtnArry.push(newData);//实质是添加lists数组内容，使for循环多一次this.setData({obtnArry,})console.log(this.data.inputValue)},
//取消按钮onCancel(){this.setData({ show: false });}

借鉴博客：https://blog.csdn.net/liushuanglian/article/details/101021928

微信小程序多标签选择和添加标签相关推荐

微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
导入微信小程序显示未选择环境或未指定环境，解决办法
导入微信小程序显示未选择环境或未指定环境如下图所示: 解决办法:重新导入,选择云开发(需删掉以前的导入记录) 1.点击云开发申请通过 2.右键cloudfuncrions, 3.点击同步云函数列表 ...
微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序点击选择拨打多个电话
微信小程序点击选择拨打多个电话效果预览 wxml 内 <view class='product-contact' wx:if="{{contact!=''}}" data- ...
【微信小程序】图片选择、转码、压缩、预览、上传，file与base64
0 前言微信小程序中,上传图片,如标题,涉及图片选择.图片转码.图片压缩.图片预览.图片上传等 1 图片选择需要使用微信提供的wx.chooseMedia chooseImage() {var t ...
微信小程序多规格选择
解析都在代码里面,先看看效果 1.index.html <view class="goodsdetialtwo"><view class='guige' bind ...
微信小程序：实现选择视频 + 页面跳转 + 数据传送功能
一.实现的功能还是这个熟悉的页面: 这次实现: 点击"选择视频"按钮,可以从本地相册中选取相册或者图片,并传回给该页面再选择完视频之后,会出现一个新的页面,并且这个页面会出现刚 ...
微信小程序调用相机选择图片生成水印
项目近期有一个需求,是在小程序使用相机拍照时,页面缩略图和上传服务器(或保存本地)的都是带水印的,水印文案是当前的时间和当前所处的地点. 前期使用了微信小程序的wx.chooseImage相机拍照,再 ...
微信小程序实现给循环列表添加点击样式
微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: < ...

微信小程序多标签选择和添加标签

微信小程序多标签选择和添加标签相关推荐

最新文章

热门文章

微信小程序 多标签选择和添加标签

微信小程序 多标签选择和添加标签相关推荐

最新文章

热门文章

微信小程序多标签选择和添加标签

微信小程序多标签选择和添加标签相关推荐