uniapp开发结合Uview实现弹窗界面,加接口请求渲染。
代码
<template>
<view>
<view @click="show=true">
<slot></slot>
</view>
<u-popup :show="show" @close="show=false" mode="bottom" bgColor="transparent">
<view class="popupwin">
<div class="popTitle">
{{title}}
</div>
<div class="close" @click="getHide">
<u-icon size="20" name="close"></u-icon>
</div>
<scroll-view class="searchbody" scroll-y>
<div class="list">
<div @click="getactive(item)" class="listitem" v-for="(item,index) in list" :key="index">
<text>{{item.name}}</text>
</div>
</div>
<u-gap height="80" bgColor="rgba(0,0,0,0)" marginTop="10" marginBottom="10"></u-gap>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script>
import {
industryGetList
} from '@/config/api.js'
export default {
data() {
return {
show: false,
keyword: '',
list: [],
}
},
props: {
title: {
type: String,
default () {
return ''
}
},
type: {
type: Boolean,
default () {
return false
}
},
},
watch: {},
mounted() {
this.getdata()
},
methods: {
getshow() {
this.show = true
},
getHide() {
this.show = false
},
getactive(item) {
this.show = false
this.$emit('getdata', item)
},
getdata() {
var that = this;
that.list = [];
industryGetList({}).then(res => {
if (res.code == 200) {
that.list = res.data.list
}
}).catch(err => {
})
}
}
}
</script>
<style scoped lang="scss">
.popupwin {
width: 750rpx;
// height: 750rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 0px 0px;
opacity: 1;
position: relative;
z-index: 1000;
}
.line {
width: 100rpx;
height: 4rpx;
opacity: 1;
background: #7D7D7D;
margin: 25rpx auto;
}
.list {
width: 686rpx;
margin: 0 auto;
.listitem {
height: 96rpx;
width: 100%;
border-bottom: 1rpx solid rgba(#000000, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
image {
width: 34rpx;
height: 34rpx;
margin-right: 32rpx;
}
text {
margin-left: 32rpx;
font-size: 34rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
}
.nodata {
font-size: 34rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #7D7D7D;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin: 64rpx auto;
}
.searchbody {
height: 550rpx;
}
.close {
position: absolute;
left: 30rpx;
top: 42rpx;
z-index: 10;
}
.popTitle {
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 32rpx;
color: #000;
}
</style>
使用实例
<getCategory title="选择类别" @getdata="getindustry">
<item title="选择类别" :showRightIcon="true">
<input class="input" type="text" disabled="" v-model="data.industryName" />
</item>
</getCategory>
getindustry(e) {
console.log(e)
this.data.industryId = e.id
this.data.industryName = e.name
},
gitee
getCategory
gitee uniapp 类别选择弹窗