uniapp小程序点击切换字体样式

32 篇文章 1 订阅
32 篇文章 1 订阅
<view :class="[active==index ? 'checkno' : 'checks']" v-for="(item,index) in lists" :key="index" @click="check(index,item.area_name)">{{item.area_name}}</view>
data() {
		return {
			active: 0,
			lists:[
				{
					area_name:'一'
				},
				{
					area_name:'二'
				}
			]
		}
	},
	methods: {
		check(index,name){
			this.active = index
		}
	}
	<style>
	.checks, .checkno{//默认样式
					height: 60rpx;
					width: 20%;
					// background: yellow;
					font-size: 30rpx;
					float: left;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 30rpx;
				}
				.checkno{//切换后样式
					color: #f02e4b;
				}
	</style>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp是一种基于Vue.js开发的跨平台应用框架,可以同时开发iOS、Android、H5和小程序等多个平台的应用。UniApp小程序是指使用UniApp框架开发的小程序。 要实现在UniApp小程序点击按钮截屏的功能,可以按照以下步骤进行操作: 1. 在需要添加截屏功能的页面中,添加一个按钮元素,例如: ```html <template> <view> <button @click="captureScreen">点击截屏</button> </view> </template> ``` 2. 在页面的methods中定义captureScreen方法,用于触发截屏操作: ```javascript methods: { captureScreen() { uni.showToast({ title: '截屏中...', icon: 'loading', duration: 2000 }); // 使用uni-app提供的api进行截屏操作 uni.canvasToTempFilePath({ x: 0, y: 0, width: uni.getSystemInfoSync().windowWidth, height: uni.getSystemInfoSync().windowHeight, destWidth: uni.getSystemInfoSync().windowWidth, destHeight: uni.getSystemInfoSync().windowHeight, canvasId: 'canvas', success: (res) => { // 截屏成功后的回调函数 uni.hideToast(); console.log(res.tempFilePath); // 截屏成功后的临时文件路径 // 可以将截屏后的图片路径保存到本地或上传到服务器等操作 }, fail: (err) => { // 截屏失败后的回调函数 uni.hideToast(); console.log(err); } }, this); } } ``` 3. 在页面的wxml中添加一个canvas元素,并设置id为"canvas",用于截取屏幕内容: ```html <template> <view> <button @click="captureScreen">点击截屏</button> <canvas id="canvas" style="display: none;"></canvas> </view> </template> ``` 这样,当用户点击按钮时,就会触发截屏操作,并将截屏后的图片路径输出到控制台。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值