uniapp 常用js 实用

最新推荐文章于 2024-05-27 14:15:04 发布
最新推荐文章于 2024-05-27 14:15:04 发布
阅读量1.5k 收藏 9
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnxy/article/details/112863609
版权

点击返回上一页

<view class="btn" @tap="navigateBack()">
    <view class="txt">返回</view>
</view>
methods: {
    navigateBack(){
        uni.navigateBack();
    }
}

 

uniapp 点击切换图标

<template>
<view>
<image src="../../static/pari/buxihuan.png" v-show="showUpImg" @click="changeImg"></image>
<image src="../../static/pari/dianshubuz.png" v-show="!showUpImg" @click="changeImg"></image>
</view>
</template>

 

生命周期

export default {
data() {
	return {
		showUpImg:true
	};
},
methods:{
	changeImg:function(){
		this.showUpImg = !this.showUpImg
	}
},

}

点击添加样式，点击显示

<view class="item" @tap="hot_line(1)">
	点击显示的按钮
</view>
<view class="shade" :class="{'active':add_class==1}" @click="addClass(1)">
	显示的盒子
</view>
data(){
	return{
		add_class:'',
	}
}
methods: {
	<!--添加样式-->
	hot_line(index){
		this.add_class=index;
	},
}

.shade{
	display: none;
}
.active{
	display: block;
}

点击拨打电话

<view class="hot_line_btn hot_line_btn_bg" @tap="go">拨打电话</view>
data(){
	return{
		
	}
}
methods: {
	<!--拨打电话-->
	go:function(){
		uni.makePhoneCall({
		    phoneNumber: '4001-170-170' //仅为示例
		});
	}
}

最简单的显示隐藏

<view class="top_list" @click="box_if">	
 	点击的按钮
 </view>
 
 <view   v-show="!flag">			
 	用于显示隐藏的盒子
 </view>
 
 data() {
	return {
		flag:true
	}
}

methods: {  
	box_if(){
		this.flag = !this.flag;
	}
 }

uniapp  小程序端，获取用户头像和昵称

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<!--头像-->
		<image :src="userInfo.avatarUrl"></image>
		<!--昵称-->
		{{userInfo.nickName}}
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:null
			}
		},
		
		onLoad(){
			//#ifdef MP-WEIXIN
			this.changeLogin();
		    //#endif
		},
		methods: {
			 changeLogin(){
				uni.getUserInfo({
					provider: 'weixin',
					//授权成功的回调
					success:(res)=> {
						console.log(res)
						uni.showToast({
						    title:'授权成功',
							icon:'none'
						})
						console.info(res.data)
						this.userInfo = res.userInfo;
						//that.login(res.data);//授权成功调用自己的登录方法就可以了
					},
					//第一次进入小程序
					fail:()=> {
						uni.showToast({
							title: '请点击授权进行登录',
							icon: 'none'
						});
					}
				});
			  }
		}
	}
</script>
<style>
</style>

扫一扫

<template>
    <view>
        <button type="primary" @click="tel()">button</button>
    </view>
</template>

<script>
    export default {
    	
            data() {
	            return {
	                
	            };
        },        
        methods:{
            tel:function(){
                uni.scanCode({
                    success:function(res){
                        console.log(JSON.stringify(res.result));
                    }
                });
            }
        }
    }
</script>

uni-app实现多选，点击选中并改变样式，可取消

<a :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">{{value.name}}</a>
export default {
	    data(){
	        return{
	            rSelect:[],
				infoArr:[
					{name:'乘车体验'},
					{name:'线路优化'},
					{name:'提前发车'},
					{name:'没停靠站'},
					{name:'物品遗失'},
					{name:'车票问题'},
					{name:'产品功能'},
					{name:'其他'}
				]
	        }
	    },
	    methods:{
	        tapInfo(e) {
		        if (this.rSelect.indexOf(e) == -1) {
		    	    console.log(e)//打印下标
			        this.rSelect.push(e);//选中添加到数组里
		        } else {
			        this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
			    }
	        }
	    }
	}
.cur {
	color: white;
	border: 1px solid #e5e5e5;
	background-color: #ff5d00;
}

uni-app实现单选、多选改变样式

 单选 
	<view class="company-item" :class="{'active': isChange == index}"  v-for="(item, index) in list" :key="index" @click="clickBtn(index)">
		{{item}}
	</view>
	isChange:'-1', //单选
	list: [],   //接口获取到的数组

	// 判断 当前index 是否与 ischange 相等，不相等择改变背景为红色（代表选中），再次点击取消
	clickBtn(index){
		// 单选
		if(index!=this.isChange){
			this.isChange = index;
		}else{
			// this.isChange = -1;    //不注释则可以点击取消，注释之后点击就不再取消
		}
	},
	
多选

	<!-- 多选 -->
	<view class="skill-item" :class="{'active': isChange.indexOf(index)!=-1}"  v-for="(item, index) in list" :key="index" @click="clickBtn(index)"> 
		{{item}}
	</view>
	isChange:[],  //多选
	list: [],  //接口获取到的数组

	clickBtn(index){
		// 多选
		if (this.isChange.indexOf(index) == -1) {
			if(this.isChange.length == 3){
				uni.showToast({
					title:'最多选择三项',
					icon:'none'
				})
			}else{
				this.isChange.push(index);//选中添加到数组里
			}
		} else {
			this.isChange.splice(this.isChange.indexOf(index), 1); //取消选中
		}
		let list2 =  []
		for(let index in this.isChange){
			list2.push(this.list[this.isChange[index]])
		}
	},
.company-item{
	width:200rpx;
	height:50rpx;
	border:2rpx solid #555;
	border-radius:10rpx;
	font-size:30rpx;
	color:#555;
	text-align: center;
	line-height: 50rpx;
}
.active{
	border:2rpx solid #DD524D;
	color: #DD524D;
}

uniapp小程序24小时倒计时

<view>{{countdown}}</view>

 data() {
              return {
                  h:23,//时
                  m:59,//分
                  s:59,//秒
                  countdown:'24:00:00',//倒计时
                  timer:null,//重复执行
          },
  onLoad(){
     this.timer = setInterval(()=>{
         this.timeCount()
     },1000)
 },
 methods:{
     //24小时倒计时
             timeCount(){
                 --this.s;
                 if(this.s<0){
                     --this.m;
                     this.s=59;
                 }
                 if(this.m<0){
                     --this.h;
                     this.m=59
                 }
                 if(this.h<0){
                     this.s=0;
                     this.m=0;
                 }
                 this.countdown = this.h+":"+this.m+":"+this.s
             },
 }

uniapp中购物车demo（全选反选、计算总价、改变商品数量）

<template>
	<view class="cart">
		<view class="c">
			<view class="list"  v-for="item in list" :key='item.id'>
				<view class="l">
					<!-- {{item.isChecked}} -->
					<!-- 列表的复选框 -->
					  <evan-checkbox v-model="item.isChecked"></evan-checkbox>
					  
					<image :src="item.img" mode="" class="img"></image>
				</view>
				<view class="center">
					<view class="name">
						{{item.name}}
					</view>
				<view class="size">
					尺寸：{{item.size}}
				</view>
				<view class="count">
					数量：x{{item.count}}
				</view>
			</view>
			<view class="r">
				<!-- 商品小计 -->
				<view class="price">
					<!-- ￥{{item.price*item.count}}元 -->
					￥{{item.sumPrice}}元
					
				</view>
				<view class="update-count">
					<view class="reduce" @tap="reduce(item.id)">
					   -
					</view>
					<view class="cart-count">
						{{item.count}}
					</view>
					<view class="add" @tap="add(item.id)">
						+
					</view>
				</view>
			</view>
			
		</view>
		
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tabbar">
		
			<view class="all">
					<evan-checkbox v-model="isAllChecked"></evan-checkbox>全选
			</view>
			<view class="totalPrice">
				总价:￥{{cartTotalPrice}}元
			</view>
			<view class="submitOrder" @tap="submitOrder">
				付款
			</view>
		</view>
	</view>
</template>

<script>
	import evanCheckbox from "components/evan-checkbox/evan-checkbox.vue"
	export default {
		components:{
			evanCheckbox
		},
		data() {
			return {
				list:[]

			}
		},
		computed: {
				// 全选
				isAllChecked:{
					// list列表--->全选
					get(){
						// 列表中是否都选中了
						return this.list.every(el=>el.isChecked==true)
					},
					// 全选---->list列表
					set(val){
						console.log(val);
						this.list.forEach(el=>el.isChecked=val)
					}
				},
				// 购物车商品总价
				cartTotalPrice(){
					// 计算list列表中所有选中商品的价格
					var sum=0
					this.list.forEach(el=>{
						if(el.isChecked){
							sum=el.sumPrice+sum
						}
					})
					console.log(sum)
					return sum
				}
		
		},
		methods: {

			// 增加商品数量
			add(id) {
				
				this.list.forEach(el=>{
					if(el.id==id){
						el.count++
						// 商品小计价格也要改变
						el.sumPrice=el.count*el.price
					}
				})
				
			},
			// 减少商品数量
			reduce(id) {
				this.list.forEach(el=>{
					if(el.count>1){
						if(el.id==id){
							el.count--
							// 商品小计价格也要改变
							el.sumPrice=el.count*el.price
						}
					}
					else{
						uni.showToast({
							title:'至少购买一件商品',
							icon:'none'
						})
					}
				})
			
			},
			
			// 提交购物车订单
			submitOrder(){
				
				// 判断是否选择购物车商品
				var bol=this.list.every(el=>el.isChecked==false)
				
				// 列表中未选中提示……
				if(bol){
					uni.showToast({
						title:'请选择商品',
						icon:'none'
					})
				}else{
					// 提交选中的订单列表
					var cartList=[];
					this.list.forEach(el=>{
						if(el.isChecked){
							cartList.push(el)
						}
					})
					// 购物车总价
					cartList.totalPrice=this.cartTotalPrice;
					
					// 购物车列表（购物车总价、购物车具体商品）
					console.log(cartList)
					
				}
				
			}

		

		},
		onShow() {
			
			// 模拟从后台拿到的数据
			var orginList=[
				{
					id:'0',
					name:'西瓜红红薯',
					price:20,
					count:1,
					size:'小',
					sumPrice:20,
					img:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2607533352,3339442344&fm=26&gp=0.jpg'
				},
				{
					id:'1',
					name:'南瓜',
					price:10,
					count:3,
					size:'中等',
					sumPrice:30,
					img:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3387044952,2039738596&fm=26&gp=0.jpg'
				},
				{
					id:'2',
					name:'红枣',
					price:10,
					count:4,
					size:'迷你',
					sumPrice:40,
					img:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2872794674,3215826466&fm=26&gp=0.jpg'
				}
			]
			
			// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
			orginList.forEach(el=>el.isChecked=false);
			
			this.list=orginList;
			
			console.log(this.list)
			


		},
		onLoad() {

		}
	}
</script>


<style lang="scss" scoped>
	page {
		background: #f1e8e7;
	}
	.cart {
		background: #f1e8e7;
	}

	.c {
		width: 670rpx;
		margin: 0 auto;
	}
	// 居中显示
	@mixin textCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list{
		width: 672rpx;
		height: 208rpx;
		background: #f9f9f9;
		box-shadow: 0 8rpx 16rpx 0 rgba(83,66,49,0.08);
		border-radius: 24rpx;
		border-radius: 24rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.l{
			display: flex;
			.img{
				width: 136rpx;
				height: 136rpx;
				background-color: pink;
				margin-left: 10rpx;
				border-radius: 8%;
			}
		}
		.center{
			width: 170rpx;
			.name{
				font-size: 26rpx;
				color: #3E3E3E;
				letter-spacing: 1.86rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.size{
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}
			.count{
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}
		}
		.r{
			.price{
				margin-top: 40rpx;
				font-size: 26rpx;
				color: red;
				letter-spacing: 0;
				margin-left: 40rpx;
			}
			// 加减数量
			.update-count{
				margin-top: 40rpx;
				display: flex;
				.reduce{
					width: 40rpx;
					height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					border-radius: 21.6rpx;
					color: #979797;
				    @include textCenter;
					font-size: 50rpx;
				}
				.add{
					width: 40rpx;
					height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					border-radius: 21.6rpx;
					color: #979797;
					@include textCenter;
					font-size: 40rpx;
				}
				.cart-count{
					width: 72rpx;
					height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					border-radius: 21.6rpx;
					margin-left: 18rpx;
					margin-right: 18rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}
		
	}


	// 底部导航
	.tabbar {
		width: 100%;
		height: 176rpx;
		background-color: #f3f3f3;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 8% 8%;
		.all {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			display: flex;
		}

		.totalPrice {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			color:red;
		}

		.submitOrder {
			width: 208rpx;
			height: 80rpx;
			background: #354E44;
			border-radius: 14rpx;
			border-radius: 14rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			letter-spacing: 2.57rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
复选框checkbox插件下载地址
https://ext.dcloud.net.cn/plugin?id=1236

https://blog.csdn.net/weixin_45803990/article/details/109511580

 

幻像
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【js】常用方法汇总
joker
08-18 183
* 字符串的常用方法: var str = 'jiuke'; * str.length ，字符串的长度 * str.charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串 * String.fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值 * str.conca...
uni-app js语法
java1234的博客
12-28 1364
小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。所以uni-app的非H5端，一样支持标准js，支持if、for等语法，支持字符串、数字、时间、布尔值、数组、自定义对象等变量类型及各种处理方法。非h5端（包含小程序和App），Android平台运行在v8引擎中，iOS平台运行在iOS自带的jscore引擎中，都没有运行在浏览器或webview里。非H5端，虽然不支持window、document、navigator等浏览器的js API，但也支持标准ECMAScript。
uniapp editor富文本 quill.min.js image-resize.min.js
08-18
quill.min.js image-resize.min.js
uniapp 引用 js 组件的方法(场景分析)
最新发布
aaa123aaasqw的博客
05-27 784
在UniApp开发中，我们使用的是Vue框架，因此，可以直接在.vue文件中引入JS文件。其中 @ 表示项目根目录，util 是 js 目录下的一个非模块化 js 文件。其中 @ 表示项目根目录，handleDecodedXML 表示导入的方法。
uniapp实战开发商城APP和小程序
03-30
课程包含Uniapp开发全端教程，课程由英特网络独家录制，购买课程后赠送后端CMS管理系统，可以修改商品及接口数据，同时CMS提供Uniapp所需要的全部API接口，包括课程内容：安卓证书申请/APP苹果打包/APP安卓打包/微信小程序发布/后端代码发布/H5打包发布/APP微信支付/APP支付支付/上拉加载下拉刷新/JWT生成Token认证等课程支持1对1售后服务，购买课程或售后服务、演示地址可以联系QQ:1901090033。
uniapp中购物车demo（全选反选、计算总价、改变商品数量）
weixin_45803990的博客
11-05 5479
复选框checkbox插件下载地址 这个插件可以使用Vue中的双向绑定。（给购物车列表中的数据添加双向绑定的属性即可） 源码 <template> <view class="cart"> <view class="c"> <view class="list" v-for="item in list" :key='item.id'> <view class="l"> <!-- {{item.isChecked}.
uniapp引入模块化js文件和非模块化js文件
热门推荐
LzzMandy的博客
09-02 1万+
uniapp引入模块化js文件和非模块化js文件
uin-app全局文件之main.js的详细教学
码奴一只猿
05-23 4210
UniApp 是一款基于 Vue.js 的跨平台开发框架，可以快速构建多端应用程序。在 UniApp 中，我们可以利用全局文件 main.js 实现一些全局配置和初始化操作，以便在整个应用程序中共享和复用代码。本文将详细介绍如何使用 UniApp 的全局文件 main.js，并提供示例代码。
roc-cli-uniapp-template_uniapp_
10-01
总的来说，【 roc-cli-uniapp-template_uniapp_ 】是一个为了加速uniapp应用开发而设计的工具，它整合了网络请求和其他实用功能，让开发者能更专注于业务逻辑和用户体验的设计，而非重复的基础工作。通过深入理解和...
uniapp聊天窗口.rar
03-31
uniapp是一个使用Vue.js语法的多端开发框架，能够方便地构建跨平台的应用程序，包括iOS、Android、H5以及小程序等。这个压缩包包含了一套完整的聊天界面和功能实现，其设计灵感可能来源于流行的即时通讯软件如QQ，...
uniapp基础开发类库，空的项目，包含一些请求方法，和一些基础快捷方法
08-03
总结：这个“uniapp基础开发类库”是一个便捷的开发工具，它简化了uniAPP项目的搭建，提供了实用的请求和快捷方法，有助于新手快速上手uniAPP开发。同时，由洛弘科技出品，意味着它可能有良好的社区支持和持续的更新...
基于 Uniapp + Vue3 + Typescript 的移动端跨平台快速开发脚手架
02-27
Typescript 在 JavaScript 的基础上添加静态类型。 Vite3 前端工具链 vk-uview-ui 支持 Vue3 的 uview 组件库 Pinia 状态管理 VueUse 基于 Composition API的实用函数集合、hooks。 UnoCSS 即时按需原子CSS...
uni-app一些工具类
06-16
它基于Vue.js，让你可以编写一次代码，然后在iOS、Android、H5、微信小程序、支付宝小程序等多个平台上运行。工具类（Utils）在任何开发项目中都扮演着至关重要的角色，它们通常包含了各种通用的功能和方法，以提高...
uni-app 封装js方、页面的生命周期、数据双向绑定、封装组件
weixin_57660141的博客
08-02 1847
主要讲外部封装js方法、页面跳转、页面的生命周期、事件、数据双向绑定、自定义tabbar、封装组件
uniapp全局引入js
Jason_WangYing的博客
11-26 1万+
在根目录创建common文件夹，再创建公共的js文件 util.js import Vue from 'vue' # 如果需要访问this,需要引入Vue实例，如果需要路由则需要引入路由，(需要使用到什么就引入什么) function showLoading(message){ if (message){ message = '加载中'; } uni.showLoading({ title: message }); setTimeout(function (.
uniApp-06 点击按钮,增加数量，计算总价
m0_59214979的博客
10-09 3856
本节：买东西的时候，加减数量，并且页面的数量也可以增加；计算全部商品的价格。 1.div
uniapp引用外部js_uniapp引入组件不显示
weixin_39632327的博客
12-20 2283
目录结构├─ page├─ index├─ ├─ js├─ ├─ ├─ index.js└─ index.vue本着js和模板分离的思想去做项目的，js相关代码放到index.js里js/index.jsimport uniList from '@/components/uni-ui/uni-list/uni-list.vue';import uniListItem from '@/compone...
web前端之uniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
05-16 1862
web前端之uniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map
uni-app 学习笔记（三）uni-app中的各种引用
qq_44648936的博客
04-12 5434
一、组件引用 组件的引用有三种办法 1、默认写法，即导入——注册——使用 2、vue3使用了新的语法糖，优化了步骤 3、uni-app继续优化为一步，引入easycom机制 但是这种优化是有条件的，页面直接使用，需要符合components/组件名称/组件名称.vue目录结构，这样才可以直接在页面中使用 举个栗子 新建components目录和test组件 <template> <view class="content"> <button type="p
uniapp常用框架
03-30
UniApp是一种基于Vue.js的跨平台开发框架，可以用于同时开发iOS、Android和Web应用。以下是一些常用的UniApp框架： 1. uView：uView是一个基于UniApp的UI框架，提供了丰富的组件和样式，可以快速构建漂亮的界面。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值