微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對應內(nèi)容
微信小程序中,經(jīng)??梢娺x擇地區(qū)或者商品分類或者其他的分類,選擇后顯示,選擇后刪除
先介紹一下主要功能:點擊 ‘地區(qū)’ ,下面選擇區(qū)域出現(xiàn),點擊 ‘選擇地區(qū)’ 中的按鈕,上面 ‘已選地區(qū)’ 顯示選擇的地區(qū),點擊 ‘x’ 已選的地區(qū)就取消,點擊 “完成” 整個選擇區(qū)域隱藏,只留下地區(qū)。
整體樣式用的彈性布局,就不細說了。
wxml:
<view class="container"> ? <text bindtap="show" class="color">地區(qū)</text> ? <view class="choose" wx-if="{{a}}"> ? ? <!-- 已選地區(qū) --> ? ? <view class="chosed"> ? ? ? <view class="chosedtop"> ? ? ? ? <text>已選地區(qū)</text> ? ? ? ? <text bindtap="finish">完成</text> ? ? ? </view> ? ? ? <view class="view"> ? ? ? ? <view class="position" wx:for='{{area}}' wx:key='index'> ? ? ? ? ? <button class="buttond">{{item}}</button> ? ? ? ? ? <image src='' bindtap="shut" data-index="{{index}}" data-name="{{item}}"></image> ? ? ? ? ? //這是按鈕右上角的關閉圖片 ? ? ? ? </view> ? ? ? </view> ? ? </view> ? ? <!-- 選擇地區(qū) --> ? ? <view class="area"> ? ? ? <text>選擇地區(qū)</text> ? ? ? <view class="chos"> ? ? ? ? <block wx:for='{{array}}' wx:key='index'> ? ? ? ? ? <button class="button {{tabindex == index?'active':''}}" data-index="{{index}}" data-name="{{item}}" bindtap="tabarea">{{item}}</button> ? ? ? ? </block> ? ? ? </view> ? ? </view> ? </view> </view>
js:
var chosedarea = []; var area = []; Page({? ? data: { ? ? a:false, ? ? tabindex:0, ? ? array: ["北京", '南京', '上海', '天津', '杭州', '云南', "北京", '南京', '上海', '天津', '杭州', '云南',"北京", '南京', '上海', '天津', '杭州', '云南'], ? }, ? // 選地區(qū) ? ?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 ? ? ? ?}) ? }, ? // 取消已選地區(qū) ? 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 ?? ? ? ? }) ? ? } ? }, ? // 點擊地區(qū)顯示 ? show:function(){ ? ? var that = this; ? ? if (that.data.a == false) { ? ? ? that.setData({ ? ? ? ? a: true ? ? ? ? ? }) ? ? } ? }, ? })
css
.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 }
如果是選完 上面添加了對應的 下面可選擇的與之對應的要隱藏掉 就這樣:
js中
// 選地區(qū) ? 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 ? ? }) ? },
在上面點擊刪除的話 下面可選擇的區(qū)域要對應的添加上:
wxml:
<view class="container"> ? <text bindtap="show" class="color">地區(qū)</text> ? <view class="choose" wx-if="{{a}}"> ? ? <!-- 已選地區(qū) --> ? ? <view class="chosed"> ? ? ? <view class="chosedtop"> ? ? ? ? <text>已選地區(qū)</text> ? ? ? ? <text bindtap="finish">完成</text> ? ? ? </view> ? ? ? <view class="view"> ? ? ? ? <view class="position" wx:for='{{area}}' wx:key='index'> ? ? ? ? ? <button class="buttond" data-index="{{index}}" data-name="{{item}}" bindtap="addName">{{item}}</button> ? ? ? ? ? <!-- <image src='' bindtap="shut" data-index="{{index}}" data-name="{{item}}"></image> --> ? ? ? ? ? <!-- //這是按鈕右上角的關閉圖片 --> ? ? ? ? </view> ? ? ? </view> ? ? </view> ? ? <!-- 選擇地區(qū) --> ? ? <view class="area"> ? ? ? <text>選擇地區(qū)</text> ? ? ? <view class="chos"> ? ? ? ? <block wx:for='{{array}}' wx:key='index'> ? ? ? ? ? <button class="button {{tabindex == index?'active':''}}" data-index="{{index}}" data-name="{{item}}" bindtap="tabarea">{{item}}</button> ? ? ? ? </block> ? ? ? </view> ? ? </view> ? </view> </view>
js
var chosedarea = []; var area = []; Page({ ? data: { ? ? a: false, ? ? tabindex: 0, ? ? array: ["北京", '南京', '上海', '天津', '杭州', '云南', "新疆", '黑龍江', '東北', '威海', '寧夏', '廣西', "西安", '山東', '青島', '濟南', '煙臺', '蓬萊'], ? }, ? // 選地區(qū) ? 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 ? ? }) ? }, ? // 取消已選地區(qū) ? 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 ? ? ? }) ? ? } ? }, ? // 點擊地區(qū)顯示 ? show: function () { ? ? var that = this; ? ? if (that.data.a == false) { ? ? ? that.setData({ ? ? ? ? a: true ? ? ? }) ? ? } ? }, })
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
layui 地區(qū)三級聯(lián)動 form select 渲染的實例
今天小編就為大家分享一篇layui 地區(qū)三級聯(lián)動 form select 渲染的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09HTML5附件拖拽上傳drop & google.gears實現(xiàn)代碼
從gmail 的附件拖拽上傳,到網(wǎng)易郵箱的拖拽上傳,我們看到了html 5 為我們帶來了新的web體驗。2011-04-04