uni-app(2)

常用组件：

1.uni-card

链接:uni-app官网

组件属性：

 

 

代码块:

<template>
	<view>
     <uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" extra="2022" note="tips">
    	<view>Uniapp</view>
		<view>React</view>
		<view>Java</view>
     </uni-card>
	 
	 <uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" extra="2022"
	  :isFull="true" note="tips">
	     	<view>Uniapp</view>
	 		<view>React</view>
	 		<view>Java</view>
	 </uni-card>
	 
	 <uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" 
	 extra="2022" note="tips" cover="../../static/logo.png">
	     	<view>Uniapp</view>
	 		<view>React</view>
	 		<view>Java</view>
	 </uni-card>
	 
	 <uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" 
	 extra="2022" note="tips">
	     	<view>Uniapp</view>
	 		<view>React</view>
	 		<view>Java</view>
			<image slot="cover" src="../../static/logo.png"></image>
	 </uni-card>
	 
	</view>
</template>	

<script>
	export default {
		
	}
</script>

<style scoped>

</style>

效果：

 

 2.uni-badge  数字角标

链接:uni-app官网

组件属性：

 

 

代码块：

<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<uni-badge size="small" :text="100" absolute="rightBottom" type="primary"><button type="default">右下</button></uni-badge>

		<uni-badge text="1"></uni-badge>

		<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>

		<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
		
		<!-- html代码中都是字符串类型，而JS代码中才有数据类型的概念， string,boolean ,number -->

        <!-- offset="[10,10]" 此处的[10,10]是字符串类型 -->
		<!-- :ffset="[10,10]" 此处的[10,10]是数组类型 ，    :属性名="js代码范围"-->
		<uni-badge text="10" type="warning" absolute="rightTop" :offset="[10,10]" isDot="">
			<image src="../../static/logo.png"
			 style="width: 100px;height: 100px;border: 1px solid red;" 
			 mode="">
			 </image>
	    </uni-badge>
	</view>
</template>

<script>
export default {};
</script>

<style scoped></style>

 效果：

 3.uni-dateformat  日期格式化

链接：uni-app官网

组件属性：

 

 

 代码块：

<template>
	<view>
       <view>{{now}}</view>
	   
	   <uni-dateformat :date="now" />
	   
	   <view>
		   <uni-dateformat :date="now" format="yyyy年MM月dd日 hh:mm:ss" />
	   </view>
	   
	   <view>
	   		   <uni-dateformat :threshold="[4e5,9e5]" :date="before30000" format="yyyy年MM月dd日 hh:mm:ss" />
	   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				now: new Date().getTime(),
				before30000: new Date().getTime()-500000
			};
		},
	}
</script>

<style scoped>

</style>

 效果：

<view>标签可以代表一行~~

4.uni-collapse  折叠栏

链接：uni-app官网

属性：

 

    手风琴模式：即当多个折叠栏时，每次点击后只会显示一个折叠栏下效果

代码段：

<template>
	<view>
    <uni-collapse :accordion="true">
    	<uni-collapse-item title="水浒传" thumb="/static/logo.png" :showAnimation="true">
			<view style="background-color: aquamarine;padding: 10px;">
				水浒传
			</view>
    	</uni-collapse-item>
		
		<uni-collapse-item title="三国演义" disabled="" :showArrow="false">
			三国演义
		</uni-collapse-item>
		
		<uni-collapse-item title="西游记">
			西游记
		</uni-collapse-item>
		
		<uni-collapse-item title="红楼梦">
			红楼梦
		</uni-collapse-item>
    </uni-collapse>
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style scoped>

</style>

 效果：

 5.uni-notice-bar  通告栏

链接:uni-app官网

 属性：

 

 代码块：

<template>
	<view>
		<uni-notice-bar
			@getmore="getmore()"
			showIcon
			showClose
			showGetMore
			:scrollable="true"
			:speed="50"
			color="green"
			single=""
			text="欢迎来到河南省信阳市商城县"
		></uni-notice-bar>
	</view>
</template>

<script>
export default {
	methods: {
		getmore() {
			alert('hello');
		}
	}
};
</script>

<style scoped></style>

 效果：

点击事件: alert("hello")

 

 6.uni-list  列表

链接：uni-app官网

属性：见官网

 

代码块：

<template>
	<view>
		<uni-list>
			<uni-list-item clickable title="微信安全中心" note="如果您有什么问题的话,请点击微信安全中心"></uni-list-item>
			<uni-list-item title="微信号" rightText="hello kitte"></uni-list-item>
			<uni-list-item showBadge badgeText="77" title="支付" thumb="/static/logo.png" thumbSize="sm" showArrow></uni-list-item>
			<uni-list-item title="蓝牙" :note="blueStatus ? '已开启' : '已关闭'" showSwitch :switchChecked="blueStatus" @switchChange="blueChanged"></uni-list-item>
			<uni-list-item title="测试" note="考试" thumb="/static/logo.png" direction="column"></uni-list-item>

			<uni-list-item direction="column">
				<view slot="header">header</view>
				<view slot="body">body</view>
				<view slot="footer">footer</view>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			blueStatus: true
		};
	},

	methods: {
		blueChanged(event) {
			console.log(event), (this.blueStatus = event.value);
		}
	}
};
</script>

<style scoped></style>

 效果：