vue3+vant4新界面模板：带底部浮动按钮
<template>
<div class="page-bg">
<section class="tl-section-0 mb-10">
<van-row justify="center">
<van-col class="tl-font-14-666-400">基本信息</van-col>
<van-col class="tl-font-14-475-500 ml-91">预检信息</van-col>
</van-row>
<div class="tl-flex-center" style="height: 21px">
<div class="tl-point-7"></div>
<div class="line-w130"></div>
<img src="@/assets/icon/now.png" class="tl-img-11" alt="" />
</div>
</section>
<div class="height-120"></div>
<div class="tl-footer tl-flex-bwt">
<div class="tl-btn-164">返回上一步</div>
<div class="tl-btn-164-yes">下一步</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.page-bg {
width: 100vw;
overflow-y: scroll;
background-color: #f0f2f4;
}
.tl-section-0 {
height: 46px;
background: #ffffff;
padding: 6px 0;
}
.tl-font-14-475-500 {
font-size: 14px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #0b457f;
}
.tl-img-11 {
width: 11px;
height: 11px;
}
.line-w130 {
width: 130px;
height: 1px;
background: #d8d8d8;
}
.tl-point-7 {
width: 7px;
height: 7px;
border-radius: 50%;
background: #cccccc;
}
.ml-91 {
margin-left: 91px;
}
.tl-section {
height: auto;
background: #ffffff;
padding: 12px 15px 18px 12px;
}
.tl-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 54px;
background: #ffffff;
padding: 0 15px;
.tl-btn-164 {
width: 164px;
height: 38px;
line-height: 38px;
text-align: center;
background: #ffffff;
border-radius: 24px 24px 24px 24px;
border: 1px solid #999999;
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.tl-btn-164-yes {
width: 164px;
height: 38px;
line-height: 38px;
text-align: center;
background: #0b457f;
border-radius: 24px 24px 24px 24px;
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
}
/*重置默认样式，间距处理*/
::v-deep .van-cell-group {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
::v-deep .van-cell {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
line-height: 29px;
/*border-bottom: 1px solid #e6e6e6;*/
}
::v-deep .van-field__control {
padding: 0 10px;
}
.tl-border-1 {
border-bottom: 1px solid #e6e6e6;
}
::v-deep .van-cell:after {
position: relative;
}
</style>
vue3+vant4新界面模板：
<template>
<div class="page-bg">
<section class="tl-section mb-10">
<div class="tl-font-14-333-500 mb-14">基本信息</div>
<van-row justify="space-between" class="mb-16">
<van-col class="tl-font-14-999-400">车主姓名</van-col>
<van-col class="tl-font-14-333-400">王菲</van-col>
</van-row>
</section>
<div class="height-120"></div>
<div class="tl-footer tl-flex-bwt">
<div class="tl-font-16-3d3-400">
支付金额：<span class="tl-font-20-3d3-500">¥290</span>
</div>
<div class="tl-btn-193 active">立即支付</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.page-bg {
width: 100vw;
overflow-y: scroll;
background-color: #f0f2f4;
}
.tl-section {
height: auto;
background: #ffffff;
padding: 12px 15px 18px 12px;
}
.tl-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 54px;
background: #ffffff;
padding: 0 15px;
.tl-btn-193 {
width: 193px;
height: 38px;
line-height: 38px;
text-align: center;
background: #f3f3f3;
border-radius: 24px 24px 24px 24px;
font-size: 16px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.active {
background: #0b457f;
color: #ffffff;
}
}
</style>
03阻止事件冒泡
@click.stop 阻止事件冒泡
02 存取操作：
uni.setStorageSync('storage_key', 'hello');
uni.getStorageSync('storage_key');
01 新模板：
<template>
<view class="page-bg">
<view class="main-container">
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.page-bg {
width: 100vw;
height: 100vh;
overflow: hidden;
background-size: 750rpx auto;
background-color: #F9F9F9;
}
.main-container {
width: 694rpx;
margin: 0 auto;
display: flex;
flex-direction: column;
}
</style>
再次确认框
let self = this;
uni.showModal({
title: '提示信息',
content: '是否取消关注当前疾病？',
cancelText: "取消",
confirmText: "确认",
confirmColor: '#2851F3',
cancelColor: '#9E9E9E',
success: function (res) {
if (res.confirm) {
self.saveDra(item);
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
git回滚到某次提交
git reset --hard xxx
git push origin HEAD --force
git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前
$ git reset --hard commit_id 退到/进到 指定commit的sha码
强推到远程：
$ git push origin HEAD --force
作者：CgySHFF
链接：https://www.jianshu.com/p/5eb2227d5546
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
02.定时器：
setTimeout(() => {
this.getList();
}, 2000)
9.超出显示省略号：
.tl-word-120 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 120rpx;
}
.tl-word {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 580rpx;
}
.tl-flex{
display: flex;
}
8.创建新页面模板：2021-06-15
<template>
<view class="page-bg">
<view class="main-container">
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.page-bg {
width: 100vw;
height: auto;
overflow: hidden;
background-size: 750rpx auto;
background-color: #fff;
}
.main-container {
width: 710rpx;
margin: 0 auto;
display: flex;
flex-direction: column;
}
</style>
- uniapp 动态监听按钮
https://www.jianshu.com/p/2cd8bc592b22
9.ajax封装
getData() {
this.$http.post('getMyResidentialInfo', {}).then(([error, res]) => {
if(res.data.code == 200) {
let data = res.data.data;
this.myHome = data.community_info.name;
//this.cateLists = this.formCate(data.cate)
} else {
this.$common.toast(res.data.message)
}
})
},
10.携带多参数界面跳转操作
//跳转界面操作
let params = {
id: '',
avatar: '',
nickname: '',
}
let tempData = JSON.stringify(params)
uni.navigateTo({
url: '/pages/publish/preview?tempData=' + encodeURIComponent(tempData),
})
//落脚界面接受处理
onLoad(options){
let self = this;
//debugger
let params = JSON.parse(decodeURIComponent(options.tempData));
self.showData = params; //界面回显的数据源
self.showTime = self.timeStamp(params.start_time);
},
7.异步调用
let code = await self.getCode(); //获取一个异步调用的返回值，有了才继续执行
async getCode() {
return new Promise((resolve) => {
uni.login({
provider: 'weixin',
success: function(loginRes) {
let code = loginRes.code; //重新获取一次code参数
resolve(code);
}
});
});
},
9.flex 布局 保持横排不并排操作：
image.png
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
.tl-section{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:100%;
}
<view class="tl-section">
<view class="tl-font-28-686">当前糖果</view>
<view class="tl-font-48-900">157.54</view>
<view>
<button class="tl-btn tl-font-28-red">兑换</button>
</view>
</view>
image.png
8 验证码 倒计时
// 验证码
navCheck() {
if (this.codetime > 0) return; //校验短信倒计时
if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
uni.showToast({
icon: 'none',
mask: true,
title: '手机号有误'
});
return;
}
let params = {
mobile: this.mobile
};
//todo 待对接验证码接口
this.$http.post('sendCode', params,{token: 'token'}).then(([error, res])=>{
if(res.data.code == 1) {
uni.showToast({
title:'验证码发送成功',
icon:'none',
})
//验证码倒计时
this.codetime = 120;
let timer = setInterval(() => {
this.codetime--;
if (this.codetime < 1) {
clearInterval(timer);
this.codetime = 0;
}
}, 1000);
}else {
uni.showModal({
title: '提示',
showCancel: false,
content: res.data.msg,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
/*uni.showToast({
icon: 'none',
mask: true,
title: res.data.msg,
duration: 2500
});*/
}
})
},
if(res.data.code == 1){
}else if(res.data.code != 1){
uni.showToast({
title: res.data.msg,
icon:'none',
duration: 2000
})
}
{
name: '张三三',
time: '2020-2-5 12:50',
profit: '2.5'
}
6.css3 勾勾特效
image.png
.feature i {
width: 14px;
height: 6px;
display: inline-block;
border: 1px solid #23b8ff;
border-width: 0 0 2px 2px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
vertical-align: baseline;
}
5.扫码进入或者用户点击分享进入(2020-12-12)：
if(options && options.serviceId){ //用户点击分享连接进入
self.serviceId = options.serviceId;
}else if(options && options.q){
let url = decodeURIComponent(options.q);
let serviceId = (url.match(/serviceId=(\w+)/) ? url.match(/serviceId=(\w+)/)[1] : null);
console.log("serviceId===================serviceId==",serviceId);
this.serviceId = serviceId;
}
4.消息提示框：
uni.showToast({
title: res.data.msg,
icon:'none',
duration: 2000//延迟显示
})
1.线上ajax操作
//查询当前订单是否送券
getCoupons(orderId){
request({
url: inter.getConsumerCouponStatus,
data: {
orderId: orderId
},
callback: (res) => {
if(res.CODE==-1){
uni.showToast({
title: res.MESSAGE,
icon: false
});
return false;
}
if(!res.RESULT.hasConsumerCoupon){ // true 用户获取了优惠券
uni.showToast({
title: '本次消费已获赠消费券',
icon: 'none',
mask: true,
duration: 1500
});
}
setTimeout(() => {
uni.reLaunch({
url: '/pages/home/home'
})
}, 2000)
}
})
}
- 暂时去掉的菜单栏：
{
"pagePath": "pages/exam/exam",
"iconPath": "static/index_84.png",
"selectedIconPath": "static/order_06.png",
"text": "考试"
}
3.定时函数：
setTimeout(() => {
}, 300)
66.map
let list = data.data.map(item => {
item.goods_advertise_price = parseFloat(item.goods_advertise_price)
item.goods_price = parseFloat(item.goods_price)
return item
})
