【picker-view】uniapp实现带有搜索框的选择器
【picker-view】uni实现带有搜索框的选择器。
·
一 组件内容
<template>
<view class="">
<!-- 品牌查询 start-->
<view class="date-background" v-show="flag">
<view class='date-gray-background' @click="hiddeDatePicker"></view>
<view class='date-container'>
<view class="transparent">
<view class='date-confirm'>
<view @click="hiddeDatePicker" class="pickerCancel">取消</view>
<u--input cursorSpacing='500' v-model="searchValue" placeholder="请输入要搜索的品牌名称" border="surround"
@change='searchChange'></u--input>
<view @click="confirm1" class="pickerConfirm">确定</view>
</view>
<picker-view indicator-class="indicator" :value="setValues" @change="bindChange"
indicator-style="height: 100rpx;" mask-style="height:900rpx;"
style="width: 100%; height: 80%;position:absolute;bottom:0rpx;text-align:center;background:white">
<picker-view-column class="pickViewColumn">
<view v-for="item in dataSource" :key="item.id" style="line-height: 68rpx">{{item.name}}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
<!-- 品牌查询 end -->
</view>
</template>
<script>
export default {
props: {
dataSource: {
type: Array,
default: null
},
/**
* picker默认展示的值
*/
value: {
type: Array,
default () {
return [0]
}
},
},
components: {},
data() {
return {
flag: false,
searchValue: '', // 搜索值
setValues: [], // picker 选择值
form:{
id:'',
name:''
}
}
},
onLoad(option) {},
methods: {
// 品牌查询
pinpaiFun() {
this.flag = true;
},
bindChange(e) {
let value = e.detail.value.toString();
this.dataSource.forEach((item,index) => {
if(value == index){
this.form.id = item.id;
this.form.name = item.name
}
});
},
hiddeDatePicker() {
this.flag = !this.flag
},
showDatePicker() {
this.flag = !this.flag
},
confirm1(e) {
this.flag = !this.flag;
this.$emit('recload',this.form);
},
// 搜索查询
searchChange(e) {
this.setValues = [];
console.log(e, '搜索查询结果')
// TODO 未完待续,调模糊查询搜索的接口,然后把返回的结果传给this.dataSource数组
}
},
}
</script>
<style lang='scss' scoped>
.date-background {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.date-gray-background {
position: absolute;
width: 100%;
top: 0rpx;
background: rgba(0, 0, 0, .5);
height: calc(100% - 500rpx);
}
.chaxunjieguo {
width: 100%;
height: 500rpx;
overflow: scroll;
color: black;
}
.chaxunjieguo text {
display: block;
text-align: center;
padding-bottom: 10rpx;
}
.date-container {
position: absolute;
width: 100%;
height: 600rpx;
overflow: hidden;
background: #fff;
bottom: 0;
z-index: 1000;
}
.date-confirm {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
font-size: 34rpx;
line-height: 100rpx;
z-index: 2;
// line-height: 70rpx;
// color: var(--ThemeColor)
}
.pickViewColumn {
height: 600rpx;
/* margin-top: -300rpx; */
}
.indicator {
height: 80rpx;
/* border: 1rpx solid #E5E8E8; */
}
.pickerCancel {
font-size: 30rpx;
color: #777;
margin-right: 30rpx;
}
.pickerConfirm {
font-size: 30rpx;
color: #4C83D6;
margin-left: 30rpx;
}
</style>
二 页面使用
<template>
<view class="ruku">
<view class="formbox">
<view class="formitem flex_align_center">
<view class="formlabel"> <text class='red'>*</text> 品牌查询:</view>
<view class="forminput" @click="pinpaiFun">
<text v-if="form.brandname">{{form.brandname}}</text>
<text class="graytext" v-else> 请选择查询品牌 </text>
<image src="@/static/images/down.png" mode="" class="downimg"></image>
</view>
</view>
<!-- 1. template使用 -->
<pinpaiPicker :dataSource='dataSource' :value="defaultValue" ref="pinpaiPicker" @recload='getbrand'></pinpaiPicker>
</view>
</template>
<script>
import pinpaiPicker from "@/pagesA/components/sticky/pinpai.vue" // 2.引入组件
import {
gettypeslist, // 3. 引入获取选择器内容的接口名(依项目需求)
} from "@/api/index/index.js"
export default {
// 4. 定义组件名
components: {
pinpaiPicker
},
data() {
return {
choiceType: '',
form: {
brandname:'', // 品牌名
brand:'', // 品牌id
},
isedit: false,
shopid: '', // 编辑时商品id
dataSource:[],// picker - 数据源
defaultValue:[0], // 默认值
}
},
onLoad(option) {
// console.log(getApp().globalData,'获取全局变量');
if (option.isedit) {
this.isedit = true;
uni.setNavigationBarTitle({
title: "编辑"
});
this.shopid = option.id;
}
},
onShow() {
this.getAllClassify();
},
methods: {
// 品牌查询
pinpaiFun() {
this.$refs.pinpaiPicker.showDatePicker();
},
// 获取选择器列表数据
getAllClassify() {
gettypeslist().then(res => {
this.dataSource = res.data.brand;
})
},
// 接收父组件的值
getbrand(data){
this.form.brandname = data.name;
this.form.brand = data.id;
},
}
}
//
</script>
<style lang="scss">
.ruku {
padding: 40rpx 32rpx 80rpx;
}
.formbox .formitem {
margin-bottom: 32rpx;
}
.formbox .formitem .formlabel {
width: 200rpx;
font-size: 30rpx;
}
.formbox .formitem .forminput {
position: relative;
border: 1rpx solid #DBDBDB;
width: 490rpx;
height: 70rpx;
line-height: 70rpx;
padding-left: 24rpx;
}
.formbox .formitem .forminput text {
font-size: 30rpx;
}
.formbox .formitem .forminput .downimg {
position: absolute;
right: 16rpx;
top: 25%;
width: 32rpx;
height: 32rpx;
}
.formbox .formupbox .formlabel {
width: 100%;
height: 100%;
}
.formbox .formupbox .formupload {
margin-top: 22rpx;
}
.formbox .form_input .u-input {
width: 490rpx;
height: 70rpx;
line-height: 70rpx;
}
.formbox .textarea {
width: 490rpx;
border: 1rpx solid #DBDBDB;
border-radius: 8rpx;
padding: 10rpx 15rpx;
font-size: 30rpx;
}
.formbox .placeholderStyle {
color: #c0c4cc;
font-size: 30rpx;
}
.formbox /deep/ textarea,
.formbox /deep/.uni-textarea-wrapper{
width: 460rpx !important;
}
.flex_align_center{
display: flex;
align-items: center;
}
</style>
index.js 文件示例
import request from "../request.js"
// 登录 GET POST
function dcLogin(data){
return request({
url: "api/login/dcLogin",
data: data,
method: "POST"
})
}
// 退出
function logout(data){
return request({
url: "api/login/logout",
data: data,
method: "POST"
})
}
export {
dcLogin,
logout
}
request.js 示例
import baseUrl from "./baseUrl.js"
function fun(config) {
let token;
if(uni.getStorageSync('token')){
token = uni.getStorageSync('token')
}
return new Promise(function(resolve, rejected) {
uni.request({
url: baseUrl + config.url,
method: config.method ? (config.method).toUpperCase() : "GET",
// timeout:5000,
header: {
"token": token,
'Content-Type':'application/x-www-form-urlencoded'
},
data: config.data,
success(res) {
if(res.data.code == 1){
resolve(res.data)
}else if(res.data.code == -1){
uni.clearStorageSync()
uni.showToast({
icon: 'none',
title: `${res.data.msg}`
})
uni.redirectTo({
url:'/pages/index/getCode'
})
}else{
if(res.data.msg){
uni.showToast({
icon: 'none',
title: `${res.data.msg}`
})
}else{
uni.showToast({
icon: 'none',
title: `请稍后再试`
})
}
return false;
}
},
fail(error) {
console.log(error,'错误信息')
rejected(error)
uni.showToast({
icon: 'none',
title: `500`
})
}
})
})
}
export default fun;
baseUrl.js 示例
export default "http://122.118.0.229:8090/"
项目文件结构
更多推荐
已为社区贡献26条内容
所有评论(0)