uniapp常用组件样式大全持续更新中...

最新推荐文章于 2024-08-07 15:03:37 发布
最新推荐文章于 2024-08-07 15:03:37 发布
阅读量2.1k 收藏 23
点赞数 3
分类专栏： Uniapp 文章标签： uniapp uniapp组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012015434/article/details/119346699
版权

一、支付组件使用uview-ui

效果：

组件：Pay.vue 代码：

<template>
	<!--去付款-->
	<u-popup v-model="showPay" mode="bottom" border-radius="20" class="upay" :mask-close-able="false">
		<view class="pay-alert">
			<view class="pay-con">
				<view class="ht">选择支付方式</view>
				<radio-group @change="radioChange">
					<view class="item row-between">
						<view class="fl row-center"><u-icon size="42" color="#48B36E" class="ic" name="weixin-circle-fill"></u-icon><text>微信支付</text></view>
						<radio value="apipay" color="#E41436"></radio>
					</view>
					<view class="item row-between">
						<view class="fl row-center"><u-icon size="42" color="#05B4FD" class="ic" name="zhifubao-circle-fill"></u-icon><text>支付宝支付</text></view>
						<radio value="wechat" color="#E41436"></radio>
					</view>	
				</radio-group>
			</view>
			<view class="hm row-between">
				<view class="btn row-center" @tap="closePay">暂不支付</view>
				<view class="btn row-center red">立即支付</view>
			</view>
	 </view>
	</u-popup>
</template>

<script>
	export default{
		 name:'Pay',
		 props:{
			 showPay:{
				 type:Boolean,
				 default:false
			 }
		 },
		 data(){
			 return{
				 
			 }
		 },
		 methods:{
			 closePay(){
				 this.$emit("closePay")
			 },
			 radioChange(v){
				 console.log(v.target.value)
			 }
		 }
	}
</script>

<style lang="scss" scoped>
	.upay{ margin:auto; max-width:540px;}
	.pay-alert{
		.pay-con{ padding:0 35rpx;
			.ht{ font-weight:bold; color:#333; padding:35rpx 0;}
			.item{ height:110rpx; border-top:1px solid #f8f8f8;
				.fl{
					.ic{margin:6rpx 15rpx 0 0;}
				}
				radio{ transform: scale(0.7); transform-origin: right}
			}
		}
		.hm{
			.btn{ height:110rpx; color:#333; background:#f2f2f2; font-weight:bold; flex:1; &.red{ background:$u-type-primary; color: #fff; } }
		}
	}
</style>

使用支付组件：

<template>
	<view>
        <view @tap="showPay=true">立即付款</view>
		<Pay :showPay="showPay" v-on:closePay="closePay"></Pay>			
	</view>
</template>

<script>
	import Pay from '@/components/Pay/Pay.vue'
	export default{
		components:{ Pay },
		data(){
			return{
				showPay:false
			}			
		},
		
		onLoad(){			
		},
		methods:{
			//关闭支付
			closePay(){
				this.showPay = false
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

二、物流组件

效果图：

logistics.vue 代码：

<template>
	<view>
		<!--物流-->
		<view class="logistics">			
			 <view class="goods row">
				 <view class="image"><image src="/static/img/1.jpg" mode="aspectFill"></image></view>
				 <view class="text">
					 <view class="txt">物流公司：圆通快递</view>
					 <view class="txt">运单编号：888999166546546</view>
				 </view>
			 </view>
			 <view class="logis-time">
					<view class="item cur">
						<view class="icon"></view>
						<view class="text">
							<view class="tit">商家正在通知快递公司揽件</view>
							<view class="time">2019/05/08 12:12:22</view>
						</view>
				  </view>
					<view class="item">
						<view class="icon"></view>
						<view class="text">
							<view class="tit">您的包裹已出库</view>
							<view class="time">2019/05/08 12:12:22</view>
						</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="text">
							<view class="tit">您的订单正在等待配货</view>
							<view class="time">2019/05/08 12:12:22</view>
						</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="text">
							<view class="tit">您的订单开始处理</view>
							<view class="time">2019/05/08 12:12:22</view>
						</view>
					</view>
			 </view>
			</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}			
		},
		onLoad(){			
			 
		},
		methods:{
		
		}
	}
</script>

<style> page{ background:#f4f4f4;} </style>
<style lang="scss" scoped>
.logistics{ padding:25rpx;	
		.goods{padding:25rpx; background:#fff; overflow: hidden; border-radius:20rpx;
			.image{ width:180rpx; height:180rpx; border-radius:10rpx; overflow:hidden;}
			.text{ flex:1; height:180rpx; overflow: hidden; margin-left:25rpx;
				.txt{ padding-top:15rpx;}
			}
		}		
		.logis-time{padding:25rpx 40rpx 30rpx 60rpx; background:#fff; margin-top:25rpx; overflow: hidden; border-radius:20rpx;
			.item{ position: relative; padding-bottom:60rpx; padding-left:60rpx;
				&:after{ width:1px; height:100%; background:#eee; position: absolute; left:10rpx; top:0; content:'';}
				&:nth-child(1):after{ top:20rpx;}
				&:last-child:after{ height:20rpx;}
				.icon{ width:20rpx; height:20rpx; background:#fff; z-index:1; position:absolute; left:0; top:10rpx; border-radius:50%; border:1px solid #eee;}
				.text{
					.tit{ font-size:32rpx; padding-bottom:12rpx; color:#bfbfbf;}
					.time{ color:#bfbfbf; font-size:26rpx;}
				}
				&.cur{
					.icon{ background:$u-type-primary; left:-8rpx; border:10rpx solid #FCE6EA; width:35rpx; height:35rpx;}
					.tit{ color:#333;}
					.time{ color:#888;}
				}
			}	
		}
}
</style>

三、订单样式swiper+tab

效果图：

 orderList.vue 代码：

<template>
	<view>
		<!-- #ifdef H5 -->
		<Header type="public" title="我的订单"></Header>
		<!-- #endif -->
		<!--TAB切换-->
		<view class="tab">
			<view class="tab-con fixed row-between">
				<view class="item row-center" :class="tabIndex==index?'on':''" v-for="(item,index) in tab" :key="index" @tap="changeTab(index)"><text>{{item.label}}</text></view>
				<view class="tab-line"  :style="'transform:translateX('+translateX+'px)'"></view>
			</view>
		</view>
		<!--订单列表-->
		<swiper :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(item,index) in tab" :key="index">
				<view class="orderList">
					 <view class="item">
						 <view class="ht row-between"  @tap="util.goPage('/pages/usersub/order/detail?orderId=1')">
							 <view class="name line1">店铺名称名称</view>
							 <view class="status">等待买家付款</view>
						 </view>
						 <view class="goods row"  @tap="util.goPage('/pages/usersub/order/detail?orderId=1')">
							 <view class="image"><image src="/static/img/p.png" mode="aspectFill"></image></view>
							 <view class="text">
								 <view class="title line1">商品名称展示这里是商品名称</view>
								 <view class="spec">复颜玻灵酸15片</view>
								 <view class="price row-between"><text>￥59.9</text><view class="nul"><label>X 1</label></view></view>
							 </view>
						 </view>
						 <view class="total row-between">
							 <text>共一件商品</text>
							 <view class="sf">实付款：<label>￥39.9</label></view>
						 </view>
						 <view class="btns">
							 <view class="btn row-center">取消订单</view>
							 <view class="btn row-center red">去付款</view>
						 </view>
					 </view>
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabIndex:0,  //当前index
				tabWidth:0,  //tab宽
				lineWidth:0, //线条宽
				translateX:0,//线当前位置
			  tab:[
					{label:'全部',value:1},
					{label:'待付款',value:2},
					{label:'待发货',value:3},
					{label:'待收货',value:4},
					{label:'已完成',value:5},
				],
			}			
		},
		async mounted(){
			let that = this;
			const dom1 = await this.util.getDom('tab-con');
			this.tabWidth = dom1.width;
			const dom2 = await this.util.getDom('tab-line');
			this.lineWidth = dom2.width;
			this.transTabX();
		},
		onLoad(){			
			 
		},
		methods:{
			//tab滚动
			transTabX(){				
			  let itemW = this.tabIndex * (this.tabWidth / this.tab.length);
			  this.translateX =  itemW + ((this.tabWidth / this.tab.length - this.lineWidth) / 2)
			},
			//切换
			changeTab(index){
				this.tabIndex = index;
				this.transTabX()
			},
			swiperChange(e){
				this.tabIndex = e.detail.current;
				this.transTabX()
			}
		}
	}
</script>

<style> page{ background:#f4f4f4;} </style>
<style lang="scss" scoped>
.tab{ height:110rpx;
	.tab-con{
		.item{flex:1; text-align: center; height:110rpx;
			&.on{ color:$u-type-primary; }
		}
		.tab-line{ height:5rpx; width:40rpx; transition:all 0.4s ease; position:absolute; bottom:20rpx; left:0; content:''; background:$u-type-primary;}		
	}	
}
.orderList{ padding:0 20rpx;
	.item{ background:#fff; border-radius:20rpx; padding:28rpx; padding-top:0;  margin-top:20rpx; overflow:hidden;
		.ht{ height:100rpx;
		  .name{ max-width:60%; font-size:33rpx; font-weight:bold; color:#333;}
			.status{ color:#999; &.red{ color:$u-type-primary;} }
		}
		.goods{padding:20rpx 0; overflow: hidden; border-bottom:1px solid #f9f9f9;
			.image{ width:180rpx; height:180rpx; border-radius:10rpx; overflow:hidden;}
			.text{ flex:1; height:180rpx; display:flex; justify-content: space-between; flex-direction: column; overflow: hidden; margin-left:25rpx;
				.title{ font-size:32rpx;}
				.spec{ color:#999; margin-top:-20rpx;}
				.price{ text{ font-size:32rpx; font-weight:bold;} .num{ font-size:32rpx; label{ font-size:23rpx; margin-right:8rpx;} } }
			}
		}
		.total{ padding-top:20rpx; .sf{ label{ font-size:33rpx; color:$u-type-primary; } } }
		.btns{ margin-top:25rpx; display:flex; justify-content: flex-end;
			.btn{ color:#666; border:1px solid #eee; margin-left:40rpx; border-radius:70rpx; width:200rpx; height:70rpx;
				&.red{ background: linear-gradient(-45deg, #FA143A, #E41436); color:#fff; border-color:linear-gradient(-45deg, #FA143A, #E41436); }
			}
		}
	}
}
</style>

//获取元素长宽高
	getDom(className){
		return new Promise((resolve, reject) => {
			let obj = uni.createSelectorQuery().select('.'+className)
			obj.boundingClientRect(function (data) {				      
				resolve(data)			
			}).exec();
		})
	},

四、uniapp H5端页面切换向上回弹效果（转）

/components/page-animation/index.css

/* #ifdef H5 */
uni-page {
	opacity: 0;
}

uni-page.animation-before {
	/* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
	transform: translateY(20px);
}

uni-page.animation-leave {
	transition: all .3s ease;
}

uni-page.animation-enter {
	transition: all .3s ease;
}

uni-page.animation-show {
	opacity: 1;
}

uni-page.animation-after {
	/* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
	transform: translateY(0);
}

/* #endif */

/components/page-animation/index.vue

<script>
	import './index.css'
	export default {
		// #ifdef H5
		onLaunch: function() {
			this.show()
			this.$router.beforeEach((to, from, next) => {				
				this.hide(next)
			})
			this.$router.afterEach(() => {
				setTimeout(this.show, 50)
			})
		},
		methods: {
			hide(callback) {
				const classList = document.querySelector('uni-page').classList
				classList.add('animation-before', 'animation-leave')
				classList.remove('animation-show')
				setTimeout(() => {
					classList.remove('animation-before', 'animation-leave')
					callback && callback()
				}, 300)
			},
			show() {
				const classList = document.querySelector('uni-page').classList
				classList.add('animation-before')
				setTimeout(() => {
					classList.add('animation-enter', 'animation-after', 'animation-show')
					setTimeout(() => {
						classList.remove('animation-before', 'animation-after', 'animation-enter')
					}, 300)
				}, 20)
			}
		},
		// #endif
	}
</script>

在app.vue中使用

<script>
	import pageAnimation from './components/page-animation'
	export default {
		mixins: [pageAnimation],		
		onLaunch: function() {
		
		},
		onShow: function() {
		},
		onHide: function() {
		},
        ......

五、TAB切换组件形式

效果图

components/Tab/tab.vue

<template>
	<!--TAB切换-->
	<view class="tab">
		<view class="tab-con fixed row-between">
			<view class="item row-center" :class="cur==index?'on':''" v-for="(item,index) in options" :key="index" @tap="changeTab(index)"><text>{{item.label}}</text></view>
			<view class="tab-line"  :style="'transform:translateX('+translateX+'px)'"></view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'Tab',
		props:{			
			curIndex:{
				type:Number,
				default:0
			},
			options:{
				type:Array,
				default:[]
			},
		},
		data(){			
			return{
				cur:0,  //当前index
				tabWidth:0,  //tab宽
				lineWidth:0, //线条宽
				translateX:0,//线当前位置
			}
		},
				
		watch:{
			curIndex(v){
			  this.transTabX(v)	
			}
		},
		
		async mounted(){
			 this.$nextTick(()=>{
			 		this.getDom();
			 })
		},
		
		methods:{
			//获取元素宽
			async getDom(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-con').fields({ size: true})
				query.select('.tab-line').fields({ size: true})
				query.exec((data) => {
					this.tabWidth  = data[0].width
					this.lineWidth = data[1].width
					this.transTabX(this.curIndex)
				});
			},
			//tab滚动
			transTabX(cur){
				this.cur = cur;
			  let itemW = cur * (this.tabWidth / this.options.length);
			  this.translateX =  itemW + ((this.tabWidth / this.options.length - this.lineWidth) / 2)
			},
			//切换
			changeTab(index){
				this.cur = index;
				this.transTabX(index)
				this.$emit('changeTab',index)
			},
		}
		
	}
</script>

<style lang="scss" scoped>
.tab{ height:110rpx;
	.tab-con{
		.item{flex:1; text-align: center; height:110rpx; font-size:28rpx;
			&.on{ color:$u-type-primary; }
		}
		.tab-line{ height:5rpx; width:40rpx; transition:all 0.4s ease; position:absolute; bottom:20rpx; left:0; content:''; background:$u-type-primary;}		
	}	
}
</style>

调用tab组件：

<template>
	<view class="appcon column">
		<!--TAB切换-->	
		<Tab :options="tabList" :curIndex="curIndex" @changeTab="changeTab"></Tab>
		<!--订单列表-->
		<swiper class="swiper" :current="curIndex" @change="swiperChange">
			<swiper-item v-for="(item,index) in tabList" :key="index">
				<order-item></order-item>
			</swiper-item>
		</swiper>
				
	</view>
</template>

<script>
	import Tab from '@/components/Tab/Tab.vue'
	import OrderItem from '@/components/order-item/order-item.vue'
	export default{
		components:{Tab, OrderItem },
		data(){
			return{
				curIndex:0, //当前tabIndex
			  tabList:[ //订单状态
					{label:'全部',value:1},
					{label:'待付款',value:2},
					{label:'待发货',value:3},
					{label:'待收货',value:4},
					{label:'已完成',value:5},
				],
			}			
		},
		methods:{			
			
			//tab切换
			changeTab(index){
				this.curIndex = index;
			},
			//swiper切换
			swiperChange(e){
				this.curIndex = e.target.current
			}
		}
	}
</script>

<style> page{ background:#f4f4f4; height:100%;} </style>
<style lang="scss" scoped>
.swiper{ flex:1; }
</style>

 六、图片上传样式

效果图

代码

<template>
	<view>
		
	 <view class="uploads">
		 <view class="up-item">
			 <image src="/static/img/p.png"></image>
			 <view class="close row-center">
				 <u-icon name="close" size="28" class="ico" color="#fff"></u-icon>
			 </view>
		 </view>
		 <view class="up-item">
			 <image src="/static/img/p.png"></image>
			 <view class="close row-center">
				 <u-icon name="close" size="28" class="ico" color="#fff"></u-icon>
			 </view>
		 </view>
		 <view class="up-item up column-center">
			 <view class="camera"><image src="/static/icon_camera.png"></image></view>
			 <view>
				 <text>上传凭证</text>
				 <text>(最多3张)</text>
			 </view>
		 </view>
	 </view>
						
	</view>
</template>

<script>
	export default{
		data(){
			return{		
			}			
		},	
			
		onLoad(){
			
		},
		
		methods:{			
			
		}
	}
</script>

<style> page{ background:#f4f4f4;} </style>
<style lang="scss" scoped>
.uploads{ display:flex; flex-wrap: wrap; margin-left:-25rpx;
	.up-item{ width:200rpx; height:200rpx; border:1px dashed #ddd; border-radius:10rpx; position:relative; margin:25rpx 0 0 25rpx;
		.close{position: absolute; right:0; top:0; border-radius:0 0 0 10rpx; background:rgba(0,0,0,0.6); width:40rpx; height:40rpx; .ico{transform: scale(0.6);} }
		&.up{ 
			.camera{ width:48rpx; height:37rpx; margin-bottom:18rpx;}
			text{ display: block; font-size:24rpx; color:#a8a8a8; line-height:35rpx;}
		}
	}
}
</style>

 

神夜大侠
关注
专栏目录
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
目标检测专栏持续更新中，改进YOLO系列通用，适用v5、v7、v8、所有博客均是团队原创博客，所有文章禁止转载，违者必究。
03-07 917
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
rtvue-lowcode：一款基于uniapp框架和uview组件库的开源低代码开发平台
贼大的桔子
08-31 1447
rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台，项目提供可视化拖拽编辑器，采用MIT开源协议，适用于app、小程序等项目开发。 对于客户端/浏览器端开发人员，真正意义的上做到了开箱即用！ 目前项目正在研发中，已经实现的功能如下：表单组件，自定义表单，抽奖转盘，图表。 相信开发完毕之后，本项目将会是一个非常nice的工具，能够极大减小企业app端开发成本。 项目预览地址 Project Preview Address 开源不易，朋
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email hzj_51it@aliyun.com wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的地址，icon：图标，txt：文字内容，type ：跳转方式==navigate，redirect，reLaunch，switchTab，navigateBack
uniApp：组件样式
孤安先生的博客，作者主站正在重构中，敬请期待！
07-03 810
支持基本常用的选择器 class、id、element 等，但不能使用 * 选择器。 page 相当于 body 节点。 在 pages 目录下的 vue 文件中定义的样式为局部样式，会覆盖 App.vue 中的全局样式。
uniapp——列表选择样式
最新发布
努力、拼搏、奋进
08-07 452
uniapp——列表选择样式
在学习uni-app过程中使用的css样式记录
qq_34080064的博客
05-20 1562
​在学习uni-app过程中，记录下使用的css样式，持续更新。
uniapp样式集合（包括清除button默认样式、箭头样式、关闭按钮）
weixin_45866376的博客
10-28 3195
前端按钮常用样式（包括箭头按钮、关闭按钮、点击按钮）
uni-app基本(样式和sass语法、基本语法、组件传参、全局共享数据、组件插槽、生命周期)
E_ISOLATE的博客
12-23 1183
查看vue cli安装目录where vue指令 vue-cli就是vue2 @vue就是vue3 如果cnpm uninstall 或者 npm uninstall 无效的话直接在文件夹里删除不需要的 vue版本然后执行安装命令 vue3cnpm i -g @vue/cli@3.2.1 使用uni-app 需要安装yarn然后把yarn源换成淘宝源yarn config set registry https://registry.npm.taobao.org 否则第二步创建项目会报错 查看yar
uniapp课程作业作品
06-24
2. **uniapp API和组件**：uniapp提供了丰富的API和组件库，如网络请求、存储管理、页面路由、动画处理等，这些都是uniapp开发中常用的功能。学习如何正确使用这些API和组件，能帮助开发者构建功能完善的跨平台应用...
UniApp的组件开发与使用技巧
UniApp简介与概述 UniApp是什么？ UniApp是一款基于Vue.js框架的跨平台应用开发框架，可以实现一套代码同时运行在多个平台（包括iOS、Android、H5等），极大地提高了开发效率和跨平台的性能。 UniApp的特点与优势...
uni-app知识点整理（3）- 组件的基本使用、uni-app样式
JHY97的博客
05-02 1786
目录 一、组件的基本使用 1.1 text文本组件 1.1.1 案例练习 2.1 view组件 2.1.1 案例练习 3.1 button按钮组件 3.1.1 简单案例练习 4.1 image组件 二、uni-app样式 2.1简单案例练习 一、组件的基本使用 uni-app提供了丰富的基础组件给开发者，开发者可以组合各种组件拼接自己的应用uni-app应用中的组件，就像HTML中div、p、span等标签的作用一样，用于搭建页面的基础结构 1.1 text文本组件 un.
订单列表暂无订单-VUE模板-UNIAPP模板
04-04
暂时没有订单哦 去点餐 订单列表暂无订单-VUE模板-UNIAPP模板 原切片设计文件下载后用UNIAPP切片软件生成导出就可以使用 VUE模板 UNIAPP模板 布局、样式、JS分离
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离
04-05
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离 加菜 已支付 支付成功,祝您用餐愉快 杯鸭碟头饭 数量:1 ￥2880 共2份小计￥57.60 订单详情-VUE模板-UNIAPP模板 原切片设计文件下载后用UNIAPP切片软件生成导出就可以使用 VUE模板 UNIAPP模板 布局、样式、JS分离
uni-app 页面样式
m0_58492934的博客
06-14 5478
uni-app 支持的通用 css 单位包括 px、rpxvue页面支持普通H5单位，但在nvue里不支持：nvue还不支持百分比单位。App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpxnvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：下面对 rpx 详细说明：设计师在提供设计图时，一般只提供一个
分享自己在uniapp开发中用的css样式
小虎哥的技术博客
10-28 1651
分享自己在uniapp开发中用的css样式和布局
【uniapp】uniapp从零快速开发到实践上线应用-5ColorUI样式库简介
付哥的技术课堂
04-25 325
页面参考：首先不考虑主要的功能实现，先将本页面的UI 实现出来，这里使用了colorUIku的主要样式库。 ColorUI的简要介绍并运行示例。 讲解的视频链接：https://www.bilibili.com/video/BV1Gt4y1m7Aq/ ...
uniapp 好看的UI库
小游
12-19 4238
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 这这个UI库在uniapp和微信小程序上都有，我之前也在小程序上用过，效果还是不错的。 插件地址：https://ext.dcloud.net.cn/plugin?id=239 ...
小程序：uniapp 第三弹(样式，组件，图片)
xueer43的博客
07-04 561
小程序：uni学习第三弹 组件: 地址 1.view 视图容器 类似于传统html中的div，用于包裹各种元素内容 属性 hover-class：string | 指定按下去的样式类。hover-class=“none” ，没有点击态效果 hover-stop-propagation: boolean | 指定是否阻止本节点的祖先节点出现点击态 hover-start-time: number | 按住后多久出现点击态，单位毫秒 hover-stay-time: number | 手指松开后点击态保
uni-app 开源样式资源汇总
m0_58492934的博客
06-22 596
如下是使用 uni-app 的开源案例，我们相信还有更多优秀案例，没有被我们采集到，欢迎大家到 项目案例征集 提交。mpvue的所有开源资源都可以用于uni-app。下文汇总收集了网友开源的各种mpvue项目，涵盖了各种业务场景。更多开源资源，可访问uni-app插件市场：DCloud 插件市场...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值