1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序中自定义select下拉选项框

微信小程序中自定义select下拉选项框

时间:2020-06-15 17:11:15

相关推荐

微信小程序中自定义select下拉选项框

由于微信小程序没有像h5那样的select,所以决定自己写一个。

此处是mpvue写的微信小程序

<template><div class="select_Box"><div class="select_box" ><div @click="select=!select">{{select_box_name}}</div><div class="select_box_select" v-if="select"> <div v-for="(item, index) in tableData" :key="index" ><div class="select_one" @tap="mySelect" :data-id="item.id" :data-name="item.name" :data-items="item.items">{{item.name}}</div></div></div> </div></div><div class="select_box1" ><div @click="select1=!select1">{{select_box_name1}}</div><div class="select_box_select" v-if="select1"> <div v-for="(item, index) in tableDataItems" :key="index" ><div class="select_one" @tap="mySelect1" :data-name="item.name" :data-value="item.id">{{item.name}}</div></div></div> </div></div></div></template><script>export default {data() {return {tableData: [{id: 1,name: "早饭",items: [{id: 11, name: "豆浆" },{id: 12, name: "包子" },{id: 13, name: "油条" }]},{id: 2,name: "午饭",items: [{id: 21, name: "菜煎饼" }, {id: 22, name: "豆芽饼" }]}],tableDataItems: [],select_box_name: "早饭",select_box_name1: "豆浆",select: false,select1: false};},methods: {mySelect(e) {console.log(e);this.tableDataItems = e.currentTarget.dataset.items;this.select_box_name = e.currentTarget.dataset.name;this.select_box_name1 = e.currentTarget.dataset.items[0].name;this.select = !this.select;this.select1 = false;//id e.currentTarget.dataset.id},mySelect1(e) {console.log(e);this.select_box_name1 = e.currentTarget.dataset.name;this.select1 = !this.select1;this.select = false;//id e.currentTarget.dataset.id}}}</script><style lang="less" scoped>.select_box {margin-right: 5rpx;text-align: center;float: left;width: 200rpx;line-height: 60rpx;border: 1rpx solid #cccccc;position: relative;.select_box_select {position: absolute;left: 0;top: 60rpx;z-index: 1000;border: 1rpx solid #cccccc;border-bottom: none;border-top: none;.select_one {width: 200rpx;height: 60rpx;line-height: 60rpx;border-bottom: 1rpx solid #cccccc;}}}.select_box1 {text-align: center;float: left;width: 200rpx;line-height: 60rpx;height: 60rpx;border: 1rpx solid #cccccc;position: relative;.select_box_select {position: absolute;left: 0;top: 60rpx;z-index: 1000;border: 1rpx solid #cccccc;border-bottom: none;border-top: none;.select_one {width: 200rpx;height: 60rpx;line-height: 60rpx;border-bottom: 1rpx solid #cccccc;}}}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。