uniapp整理

一、获取页面参数比如-?index=1
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].route //获取当前页面路由
let curParam = routes[routes.length - 1].options; //获取路由参数
// 拼接参数
let param = ''
for (let key in curParam) {
  param += '&' + key + '=' + curParam[key]
}
let data = {}
data.curRoute = curRoute
data.curParam = curParam
console.log(data,'82')
this.urlIndex = data.curParam.index   (获取页面index带的参数)
二、uniapp返回上一页并刷新数据方法01
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 上一页
uni.navigateBack({
    success: function() {
        beforePage.onLoad(); // 执行上一页的onLoad方法
    }
});
uniapp返回上一页并刷新数据方法02
uni.navigateBack({
  delta:1,
  success: function() {
    let page = getCurrentPages().pop(); //跳转页面成功之后
    if (!page) return;
    page.onLoad(); //如果页面存在，则重新刷新页面
  }
});
三、实现多选
<template>
1
<view class="multipleChoice">
  <view class="label-con u-justify-start u-items-center u-flex-wrap">
    <view class="label-list" :class="{'active': isActive.indexOf(index)!=-1}"
      v-for="(item,index) in tagList" :key="index" @click="addMemberTags(index)">
      {{ item.tag_name }}
    </view>
  </view>
</view>
2
<view class="multipleChoice">
  <view class="label-con u-justify-start u-items-center u-flex-wrap">
    <view class="label-list" :class="{'active': isActive.indexOf(index)!=-1}"
      v-for="(item,index) in tagList" :key="index" @click="addMemberTags(index)">
      {{ item.tag_name }}
    </view>
  </view>
</view>
</template>
<script>
export default {
  data() {
      return {
        isActive:[],
        tagList:[
          {
            tag_name:'测试1',
          },
          {
            tag_name:'测试2',
          },
          {
            tag_name:'测试3',
          },
        ],
      }
    },
    methods: {
      addMemberTags(index) {
        console.log(index,'点击的第几个')
        if (this.isActive.indexOf(index) == -1) {
          console.log(index) //打印下标
          this.isActive.push(index); //选中添加到数组里
        } else {
          this.isActive.splice(this.isActive.indexOf(index), 1); //取消
        }
      },
    },
}
</script>
<style lang="scss" scoped>
1
  .multipleChoice {
    .active{
      background: red;
    }
  }
2
  .multipleChoice {
    .label-list{
      margin-left: 30rpx;
      margin-right: 30rpx;
      height: 42rpx;
      padding-bottom: 34rpx;
      padding-top: 34rpx;
      font-size: 30rpx;
      color: #222222;
      border-bottom: 1rpx solid #ECECEC;
      background-image: url(../../static/img/btn_xz.png);
      background-position: left;
      background-size: 38rpx 38rpx;
      background-repeat: no-repeat;
      text-indent: 60rpx;
    }
    .active{
      color: #4281EA !important;
      background-image: url(../../static/img/btn_yxz.png) !important;
    }
  }
</style>
四、自定义计算头部
<template>
  <view class="ditchIndex">
    <view class="search-box" :style="{'height':totalHeight +'px'}">
      <view :style="{'margin-top':menuTop +'px','height':menuHeight +'px','line-height':menuHeight +'px'}" class="title">
        <image src="../../static/img/btn_lxwm.png" mode="" class="img"></image>首页
      </view>
    </view>
    <view class="height100"></view>
    <view class="bottomBtn">
      <view class="home btnTxt">
        <image src="../../static/img/btn_home_s.png" mode="widthFix" class="icon"></image>
        <view>首页</view>
      </view>
      <view class="nominate btnTxt">
        <image src="../../static/img/btn_tuijian_n.png" mode="widthFix" class="icon"></image>
        <view>推荐</view>
      </view>
      <view class="my btnTxt">
        <image src="../../static/img/btn_me_n.png" mode="widthFix" class="icon"></image>
        <view>我的</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        // 计算头部距离开始
        statusBarHeight: 0, //状态栏的高度 
        navigatorHeight: 0, //导航栏高度
        menuHeight: 0, //胶囊高度
        menuTop: 0, //胶囊与顶部的距离
        totalHeight: 0, //总高度
        theMoreTop: 0, //更多那个组件距离屏幕顶部的距离
        system: [],
        menu: [],
        // 计算头部距离结束
      }
    },
    onLoad() {
      uni.hideTabBar(); //不让底部显示tab选项
      // 计算头部距离开始
      //获取系统信息
      uni.getSystemInfo({
        success: res => {
          this.system = res
        }
      })
      //获取胶囊信息
      this.menu = uni.getMenuButtonBoundingClientRect()
      //计算组件高度
      this.statusBarHeight = this.system.statusBarHeight //状态栏高度
      this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //导航栏高度
      this.totalHeight = this.statusBarHeight + this.navigatorHeight //总高度
      this.menuHeight = this.menu.height //胶囊高度
      this.menuTop = this.menu.top //胶囊与顶部的距离
      //监听【更多】组件距离顶部的距离
      const query = wx.createSelectorQuery()
      query.select('#more').boundingClientRect()
      query.exec((res) => {
        //console.log(res)
        let top = res[0].bottom //id节点的下边界坐标        
        this.theMoreTop = top + this.totalHeight
      })
      // 计算头部距离结束
    },
    methods: {
      takeIn() {
        this.isActivity = 0
      },
      takeOut() {
        this.isActivity = 1
      },
      showMore() {
        this.isShow = !this.isShow
        // 先展开500毫秒后再显示文字,收缩100毫秒后再隐藏文字
        if (this.isShowText) {
          setTimeout(() => {
            this.isShowText = !this.isShowText
          }, 200)
        } else {
          setTimeout(() => {
            this.isShowText = !this.isShowText
          }, 500)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .ditchIndex{
    .search-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      background: #fff;
      .title{
        width: 100%;
        background: #fff;
        text-align: center;
        overflow: hidden;
        position: relative;
        .img{
          position: absolute;
          width: 44rpx !important;
          height: 44rpx !important;
          float: left;
          margin-left: 30rpx;
          margin-top: 5rpx;
        }
      }
    }
    .bottomBtn{
      display: flex;
      align-items: center;
      width: 100%;
      height: 100rpx;
      background: #FFFFFF;
      position: fixed;
      bottom: 0;
      .btnTxt{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20rpx;
        color: #999999;
        width: 33.3%;
        .icon{
          width: 44rpx !important;
          height: 44rpx !important;
          margin-bottom: 4rpx;
          margin-top: 8rpx;
        }
      }
    }
  }
</style>
五、预览大图
<template>
    <view class="content">
        <image class="logo" src="/static/logo.png" @click="clickImg"></image>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'Hello',
            }
        },
        onLoad() {
        },
        methods: {
            clickImg() {
                wx.previewImage({
                    urls: ["/static/logo.png"], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
                    current: '', // 当前显示图片的http链接，默认是第一个
                    success: function(res) {},
                    fail: function(res) {},
                    complete: function(res) {},
                })
            },
        }
    }
</script>
<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }
</style>
六、监听回车事件========================
<template>
  <input type="text" 
    v-model="search"//输入的内容
    confirm-type="search" //confirm-type类型以下有详解
    @confirm="getSearch" //重点是绑定@confirm软键盘回车事件
    placeholder="监听回车事件" 
    placeholder-style="font-size:30rpx;color:#B5B9BF"/>
 </template>
export default {
    components: {uniSearchBar},
    data(){
        return{
            search:""
        }
    },
    methods:{
        //@confirm监听软键盘回车事件
        getSearch(){
            console.log(this.search)
            uni.showToast({
                title:"搜索成功",
                duration:2000
                // icon:"none"
            })
        }
    }
}
七、动态编辑头部 title
uni.setNavigationBarTitle({
  title: "店铺类型"
})
八、验证6到12位密码
<input type="password" v-model="form.password" @input="fpNumInput" placeholder="请输入6-12位密码" placeholder-style="color: #999;" maxlength="12" class="margin-left30" />
// 密码只能输入纯数字/纯字母/数字字母组合
fpNumInput(e) {
  const o = e.target;
  const inputRule = /[\W]/g
  this.$nextTick(function() {
    this.form.password = o.value.replace(inputRule, '');
  })
},
九、只能输入数字
<input type="text" placeholder="请输入银行卡号" v-model="form.cardNo" @input="onKeyInput(form.cardNo)" placeholder-style="font-size: 30rpx;color: #999;" class="font-size30 color222 width100Percent height100" />
onKeyInput(val) { //过滤input只输入数字
  let i = val
  let num = i.charAt(i.length - 1)
  var reg = new RegExp("^[0-9]*$")
  if (!reg.test(num)) {
    this.$nextTick(() => {
      this.form.cardNo = ''
    })
  } else {
    return i
  }
},
十、多个class
:class="{'redText':textStr == '待处理','blueText':textStr == '处理中','greenText':textStr == '已处理'}"
:class="[{'modelColor2':item.state===1||item.state===2},{'modelColor1':active&&active.includes(item.num)}]"
十一、input输入框的光标颜色
style="caret-color:red;"
十二、获取扫的二维码的-参数
onLoad(op) {
    const opScene = op.scene;
    if(opScene){
        const scene = decodeURIComponent(opScene);
        let qrCodeScene = {
          id: scene.split('=')[1]
        };
    }
}
十三、js 删除对象属性中属性值为空的属性
form: {
  val:'测试',
  name: '',
  id: null,
  img: undefined,
  txt: '111111',
  list: [{
    name: '22222'
  }],
  array: [],
}
this.removeProperty(this.form);
removeProperty(obj) {
  Object.keys(obj).forEach(item => {
    if (obj[item] === '' || obj[item] === undefined || obj[item] === null || obj[item] ===
      'null' || obj[item].length === 0)
      delete obj[item]
  })
  console.log(obj, 'objobj')
  return obj
}
弹层之类-其他博客链接
https://blog.csdn.net/zhanglinsen123/article/details/125308866
强制更新视图
this.$forceUpdate();
[uni-app日历组件（calendar)](https://blog.csdn.net/tutouXiaoGe/article/details/123925939?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-123925939-blog-92832417.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-6-123925939-blog-92832417.pc_relevant_default&utm_relevant_index=7)
插件链接: https://ext.dcloud.net.cn/plugin?id=7839/
[日历二](https://ext.dcloud.net.cn/plugin?id=1732)

<view @longpress="longpress">
    <text>点击我</text>
</view>
longpress() {
    console.log("长按事件");
},

<input class="addre_input" type="text" focus clearable v-model="yhkName" placeholder="银行卡主名称" @input="onKeyPut"></input>
onKeyPut: function(event){
  var value = event.detail.value;
  if(!value || value == " "){
  return '';
  }
//匹配汉字的正则表达式
  const rule = /[^\u4E00-\u9FA5]/g;//如果你们需要字母或者数字，就改这儿！
  this.$nextTick(function () {
  this.yhkName = value.replace(rule,'');
  })
}

<view @click.stop="onClick">

@change="checkboxChange($event,item.id)"
console.log(e,id)

加入3行代码
:always-embed="true"
:adjust-position="true"
cursor-spacing="30"
 <input
     type="password"
     class="flex-1 ml-2"
     placeholder="请输入密码"
     autocomplete="off"
     :always-embed="true"
     :adjust-position="true"
     cursor-spacing="30"
     @input="psdInput"
   >