【底部弹出-选择器】uniapp Picker组件——底部弹起的滚动选择器
uniapp Picker组件——底部弹起的滚动选择器
·
一、要实现的效果,如下图所示:
二、代码:
<template>
<view>
//mode : selector是最普通的选择器,[具体可参考文档。](https://uniapp.dcloud.io/component/picker.html)
//range :想绑定的数组。
//range-key :想在弹出框中显示数组的哪个key值。比如我想显示数组中color title的值,就不能写成id。
//@change :点击选择时会触发这个回调函数。
<picker
@change="colorChange"
:value="colorIndex"
:range="colorList"
range-key="title">
<view class="uni-input">{{colorList[colorIndex].title}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
//选中的颜色下标
colorIndex:0,
//在picker列表所选中项的颜色id
color_id: '',
//颜色列表数据(假数据,可以在接口函数里面发请求获取真实的后台数据)
colorList:[
{id: 1, title: '红色'},
{id: 2, title: '绿色'},
{id: 3, title: '蓝色'}
],
}
},
onLoad() {
this.getCaseList()
},
methods: {
// 颜色筛选
colorChange(e){
this.colorIndex = e.detail.value
this.getCaseList()
},
//案例列表-接口
getCaseList() {
var that = this;
that.page = 1;
var params = {
//颜色id
color_id: that.colorList.length>0? that.colorList[that.colorIndex].id:'',
page: that.page,
limit: that.limit
}
this.$api.appPlateForm('POST', 'example/index', params, function(res) {
if (res.code == 200) {
that.colorList = res.data.color //颜色
that.colorList.unshift({id:'',title:'颜色'});
if(res.data.data.length>0){
that.caselist = res.data.data;
that.page++
}else{
that.caselist =[];
}
that.$forceUpdate();
}
}, function(err) {
uni.showToast({
icon: 'none',
title: err.msg
})
});
},
},
}
</script>
ending~
更多推荐
已为社区贡献13条内容
所有评论(0)