uniapp picker选择器

效果:

源码:

<template>
    <view class="bground">
        <picker class="select" mode="selector" :range="title_list" range-key="name" @change="titlePicker">
            <view style="color: #FB231F">
                {{title}}
                <text></text>
                <image src="../../static/new_my/new_honor/triangle.png" mode="widthFix" style="width: 25rpx;margin-left: 20rpx;"></image>
            </view>
        </picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                honor:false,
                title: '活动的标题点击此处选择',
                title_list:[
                    {id:12,name:'测试1'},
                    {id:25,name:'测试2'}
                ]
            }
        },
        methods:{
            titlePicker(e){ 
               this.title = this.title_list[e.target.value].title
                console.log(this.title_list[e.target.value].id) //获取id
        },
    }
</script>