meishidaYH/msdYongHu/components/fenleiList/fenleiList.vue

<template>
	<view style="background-color: white;">
		<scroll-view scroll-view  scroll-x="true" >
			<view class="">
				<view class="item_list">
					<view v-for="(item, index) in objList">
						<view class="item_content"  @click="fenleixuanz(item.id)">
							<netImage width="140" height="140" :mysrc="item.imageUrl" mymode="scaleToFill"></netImage>
							<view class="title">
								<text >{{item.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>	  
	import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				listsize:0,
				objList:[],
				fenleiList:[],
			};
		},
		methods:{
			getfenleiList(){
					api('fwlxlist',{
						pageNum:1,
						pageSize:20
					},res=>{
						if(res.data.code!=200){
							return;
						}
						this.initListObj(res.data.rows)
						//console.log('1111333333',res);
					},failc=>{
						//console.log('getadvertis----',failc)
					})
				},
				
				initListObj(list){
					this.listsize=list.length;
					this.objList=[];
					var tmpList=[];
					var language = uni.getStorageSync('language');
					if(language=='yuenan'){
						for(var i=0;i<this.listsize;i++){
							var obj={
								id:list[i].id,
								imageUrl:list[i].image,
								title:list[i].nameVi,
								detail:list[i].illustrateVi
							};
							tmpList.push(obj);
						}
					}
					else if(language=='zh-Hans'){
						for(var i=0;i<this.listsize;i++){
							var obj={
								id:list[i].id,
								imageUrl:list[i].image,
								title:list[i].nameCn,
								detail:list[i].illustrateCn
							};
							tmpList.push(obj);
						}
					}
					else if(language=='zh-Hant'){
						for(var i=0;i<this.listsize;i++){
							var obj={
								id:list[i].id,
								imageUrl:list[i].image,
								title:list[i].nameTw,
								detail:list[i].illustrateTw
							};
							tmpList.push(obj);
						}
					}
					this.objList=tmpList;
					
				},
				fenleixuanz(e){
					this.$emit('Efwflxuanze',e);
				},
			},
	}
</script>

<style lang="scss">

@font-face {
	font-family: zrht;
	src: url('/uni_modules/font/zrht.otf');
}

	.item_list{
		padding-left: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.item_content{
		width: 160rpx;
		height: 230rpx;
		margin: 16rpx 0;
		padding: 14rpx;
		box-sizing: border-box;
		image{
			width: 140rpx;
			height:140rpx;
			background-color:whitesmoke;
			display: block;
		}
		
		.title{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			line-height: 30rpx;
			padding-top: 4rpx;
		}
	}	
	.titleview{
		padding-left: 40rpx;
		padding-top: 22rpx;
		font-size: 30rpx;
		line-height: 46rpx;
		// font-family: zrht;
	}
		
</style>