微信小程序实现选择内容显示对应内容_javascript技巧_

   地区                            已选地区         完成                                  {{item}}                      //这是按钮右上角的关闭图片                                     选择地区                           {{item}}                        

var chosedarea = []; var area = []; Page({    data: {     a:false,     tabindex:0,     array: ["北京", '南京', '上海', '天津', '杭州', '云南', "北京", '南京', '上海', '天津', '杭州', '云南',"北京", '南京', '上海', '天津', '杭州', '云南'],   },   // 选地区    tabarea:function(e){     this.setData({       tabindex:e.currentTarget.dataset.index     });      var id = e.currentTarget.dataset.index;      var name = e.currentTarget.dataset.name;      chosedarea.push(name);        this.setData({          "area": chosedarea        })   },   // 取消已选地区   shut:function(e){     this.setData({       index: e.currentTarget.dataset.index,       name : e.currentTarget.dataset.name     });     var yid = e.currentTarget.dataset.index;     var yname = e.currentTarget.dataset.name;     chosedarea.splice(yid,1)     this.setData({       "area": chosedarea     })   },   // 点击完成隐藏   finish:function(){     var that = this;     if (that.data.a == true) {       that.setData({         a: false          })     }   },   // 点击地区显示   show:function(){     var that = this;     if (that.data.a == false) {       that.setData({         a: true           })     }   },   })

.container{   width: 100%;   height: 300rpx; } .choose{   width: 100%; } .buttond{   width: 88%;   padding: 0;   height: 68rpx;   line-height: 68rpx;   font-size: 32rpx;   margin-bottom: 10rpx; } .area{   display: flex;   flex-direction: column;   margin: 0 20rpx; } .chos{   display: flex;   flex-wrap: wrap;   margin-top: 15rpx; } .button{   width: 22%;   padding: 0;   height: 68rpx;   line-height: 68rpx;   font-size: 32rpx;   margin: 0 10rpx;   margin-bottom: 10rpx; } .view{   display: flex;   flex-wrap: wrap;   height: auto;   margin: 0 20rpx; } .position{   width: 24%; } .chosedtop{   display: flex;   justify-content: space-between;   margin: 0 30rpx 15rpx }

// 选地区   tabarea: function (e) {     let that = this;     that.setData({       tabindex: e.currentTarget.dataset.index     });     var id = e.currentTarget.dataset.index;     var name = e.currentTarget.dataset.name;     chosedarea.push(name);     that.data.array.splice(id, 1);     that.setData({       "area": chosedarea,       "array": that.data.array     })   },

   地区                            已选地区         完成                                  {{item}}                                                         选择地区                           {{item}}                        

var chosedarea = []; var area = []; Page({   data: {     a: false,     tabindex: 0,     array: ["北京", '南京', '上海', '天津', '杭州', '云南', "新疆", '黑龙江', '东北', '威海', '宁夏', '广西', "西安", '山东', '青岛', '济南', '烟台', '蓬莱'],   },   // 选地区   tabarea: function (e) {     let that = this;     that.setData({       tabindex: e.currentTarget.dataset.index     });     var id = e.currentTarget.dataset.index;     var name = e.currentTarget.dataset.name;     chosedarea.push(name);     that.data.array.splice(id, 1);     that.setData({       "area": chosedarea,       "array": that.data.array     })   },   // 添加回   addName:function(e){     let that = this;     console.log(e)     that.setData({       index: e.currentTarget.dataset.index,     })     var aname = e.currentTarget.dataset.name;     chosedarea.splice(that.data.index,1);     that.data.array.push(aname);     that.setData({       "area": chosedarea,       "array": that.data.array     })   },   // 取消已选地区   shut: function (e) {     this.setData({       index: e.currentTarget.dataset.index,       name: e.currentTarget.dataset.name     });     var yid = e.currentTarget.dataset.index;     var yname = e.currentTarget.dataset.name;     chosedarea.splice(yid, 1)     this.setData({       "area": chosedarea     })   },   // 点击完成隐藏   finish: function () {     var that = this;     if (that.data.a == true) {       that.setData({         a: false       })     }   },   // 点击地区显示   show: function () {     var that = this;     if (that.data.a == false) {       that.setData({         a: true       })     }   }, })