uni自定义模板

Bertha 。 2023-06-10 03:21 37阅读 0赞

页面开发时，会有很多通用样式，可以放到模板中重复调用

首先创建一个页面，

不能再page中注册，不然不能当成模板导入（非常重要）

<template name="list-goods">
    	<view>
    	   <view class="list-view">
    	   	<view class="m-view" v-for="(item,index) in listGoods" :key="index" @click="navTo('../../pages/order/order?index='+index)">
    	   		<image class="g-img" :src="item.goodImg" mode=""></image>
    	   		<view class="m-title more-hidden2">
    	   			{
       {item.goodTitle}}
    	   		</view>
    	   		<view class="j-view">
    	   			{
       {item.goodPoints}} 积分
    	   		</view>
    	   	</view>
    	   </view>
    	</view>
    </template>
    <script>
    export default {
    	name: "list-goods",//模板名字，在调用页面当标签用
    	
    	props: {	//属性，在调用页面导入熟悉
    		listGoods: {
    			type: Array,//属性类型
    		},
    		
    	},
    	//组件生命周期
    	created:function(e){
    	
    	},
    	methods: {	
    		//函数，可以直接出发函数和页面跳转
    		navTo(url){
    			uni.navigateTo({
    				url
    			});
    		}
    	}
    }
    </script>
    <style>
    
    .list-view{
    		width: 100%;
    		background-color: #FFFFFF;
    		padding: 20upx;
    		display: flex;
    		flex-wrap: wrap;
    		justify-content: flex-start;
    	}
    	.m-view{
    		width: 346upx;
    		height: 408upx;
    		background:rgba(255,255,255,1);
    		border-radius:8upx;
    		border:1upx solid rgba(216,216,216,1);
    		margin-bottom: 20upx;
    	}
    	.m-view:nth-child(odd){
    		margin-right: 20upx;
    	}
    	.g-img{
    		width: 342upx;
    		height: 262upx;
    		border-radius:8upx 8upx 0upx 0upx;
    	}
    	.m-title{
    		padding: 10upx 10upx 0 10upx;
    		font-size:24upx;
    		font-weight:500;
    		color:rgba(78,78,78,1);
    		line-height:32upx;
    	}
    	.j-view{
    		padding: 10upx;
    		font-size:26upx;
    		font-weight:500;
    		color:rgba(244,72,86,1);
    		line-height:36upx;
    	}
    
    </style>

页面写完后，在main.js中挂载 （非常重要）

![20191025142105891.png][]

import listGoods2 from './myComponents/list-goods/list-goods.vue'
    //文件路径保证正确

最后在需要用到的页面调用

先导入模板（非常重要）

然后就可以用 模板中的name 直接调用

<list-goods :listGoods="listGoods"></list-goods>
    //：listGoods 就是模板中设置的数据 是什么类型就导入什么数据

<template>
    	<view>
    		<view class="view-header flex-cc">
    			<view class="w-view flex-cc">
    				<view class="z-view flex-cc">
    					<view class="n-view flex-ccc border">
    						<view class="jifen">
    							1230
    						</view>
    						<view class="border-b"></view>
    						<view class="jf-text">
    							我的积分
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    		<view class="bar flex-ca">
    			<view class="uni-icon uni-icon-compose border-r flex-cc" @click="navTo('integralDetail?type=1')">
    				积分明细
    			</view>
    			<view class="uni-icon uni-icon-compose flex-cc" @click="navTo('integralDetail?type=2')">
    				兑换记录
    			</view>
    		</view>
    		
    		<view class="flex-cc pad30">
    			商品兑换
    		</view>
    		<list-goods :listGoods="listGoods"></list-goods>
    		
    	</view>
    </template>
    
    <script>
    	//import listGoods from '@/components/list-goods/list-goods.vue';
    	
    	import listGoods from '@/myComponents/list-goods/list-goods.vue';
    	export default {
    		components: {
    		    listGoods
    		},
    		data() {
    			return {
    				listGoods:[
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
    				]
    			}
    		},
    		methods: {
    			navTo(url){
    				uni.navigateTo({
    					url
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    	.view-header{
    		height:306upx;
    		background:linear-gradient(180deg,rgba(42,144,252,1) 0%,rgba(82,192,253,1) 100%);
    	}
    	.w-view{
    		width: 206upx;
    		height: 206upx;
    		border-radius: 50%;
    		overflow: hidden;
    		background:rgba(82,192,253,1);
    	}
    	.z-view{
    		width: 182upx;
    		height: 182upx;
    		border-radius: 50%;
    		overflow: hidden;
    		background:rgba(255,255,255,1);
    	}
    	.n-view{
    		width: 158upx;
    		height: 158upx;
    		border-radius: 50%;
    		overflow: hidden;
    		background:rgba(255,255,255,1);
    	}
    	.border{
    		border: rgba(82,192,253,1) 1upx solid;;
    	}
    	.border-b{
    		border-bottom: rgba(82,192,253,1) 1upx solid;
    		width: 100%;
    		height: 2upx;
    	}
    	.jifen{
    		font-size:48upx;
    		font-weight:500;
    		color:rgba(65,172,252,1);
    		line-height:66upx;
    	}
    	.jf-text{
    		font-size:26upx;
    		font-weight:500;
    		color:rgba(65,172,252,1);
    		line-height:36upx;
    	}
    	.bar{
    		font-weight:500;
    		padding: 18upx;
    		background-color: #FFFFFF;
    	}
    	.bar>view{
    		width: 50%;
    		font-size:30upx;
    		color:rgba(60,60,60,1);
    		line-height:42upx;
    	}
    	
    </style>

这样简单的 自定义模板就完成了

[20191025142105891.png]: /images/20230531/df3882196d8243b6825ea942314f7ad4.png