uniapp之picker底部滚动选择器

常用的app里都有分类选择，今天提供一个案例

效果如图

思路：

后台查出数据，json传递

代码：

<template>
	<view class="art-cate">
				<view>文章分类</view>
				<view class="">
					<picker mode="selector" :range="caties" @change="cateChange">
						<view>{{caties[sedCateIndex]}}</view>
					</picker>
				</view>
			</view>
</template>

<script>
var _this;

export default{
	data(){
		return{
			caties : ['点击选择'],
			currentCateIndex : 0,
			catiesFromApi : [],
			// 记录真实选择的api接口数据的分类id
			sedCateIndex  : 0

		}
	},
	onLoad:function(){		
		_this = this;  //把this赋给_this
		uni.request({  // 加载文章
			url: 'http://localhost:8081/jeefast-rest/novelTypel/fenlei',
			method: 'GET',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
			},
			data: {
				
			},
			success: res => {
				//为了符合picker格式  把数据push进数组
				for(var i=0;i<res.data.ok.length;i++){
					_this.caties.push(res.data.ok[i].tname);  //分类名称
					_this.catiesFromApi.push(res.data.ok[i].tid);//分类主键
				}
			},
			fail: () => {},
			complete: () => {}
		});
	},
	mounted(){
		
	},
	methods: {
		//分类
		cateChange(e){   //调用方法并传值
			this.sedCateIndex = e.detail.value;   //更改分类
			console.log("主键"+_this.catiesFromApi[e.detail.value-1]);  //获取分类的主键
		}
	}
}
</script>

<style>

</style>