点击返回上一页
<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.youkuaiyun.com/weixin_45803990/article/details/109511580
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
