AI 助理
备案控制台
开发者社区 云计算 文章 正文

uniapp整理

2023-09-16 41
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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">

uniapp中@change事件传递多个参数

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

处理input键盘遮挡问题：

加入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"
   >

自定义计算头部截图


兜里只有三分钱~
目录
相关文章
前端技术栈
|
5月前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记（一）
前端性能优化的整理笔记（一）
前端技术栈
150 0
hhzz
|
5月前
|
移动开发 小程序 JavaScript
(一)、项目介绍及知识点概述【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
(一)、项目介绍及知识点概述【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
hhzz
70 0
猫哥ducafecat
|
3月前
|
Dart 开发者 UED
flutter 非常用组件整理 第三篇
本文是非常用组件的第三讲，介绍了一些不为人知但却能大幅提升Flutter应用UI效果和功能的高级组件,包括FadeInImage、GridPaper、Hero等,为开发者带来更丰富的UI设计可能。
猫哥ducafecat
49 3
flutter 非常用组件整理 第三篇
猫哥ducafecat
|
3月前
|
Dart 数据安全/隐私保护 开发者
flutter 非常用组件整理 第二篇
本文是Flutter非常用组件第二篇，从开发者的视角出发,精选并深入剖析了AboutDialog、AnimatedGrid、Badge等鲜为人知却功能强大的隐藏组件,为读者提供了一份全面的Flutter UI组件使用指南。无论您是初学者还是有经验的开发者,相信本文都能为您的Flutter项目注入新的活力,助力打造出色的应用界面。
猫哥ducafecat
39 2
flutter 非常用组件整理 第二篇
土木林森
|
5月前
|
缓存 数据处理 UED
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
【5月更文挑战第17天】在 Uniapp 开发中，解决页面间数据传递、网络请求异常、屏幕适配及性能优化等问题至关重要。利用路由参数传递复杂数据，如`uni.navigateTo`和`JSON.stringify`；处理网络请求异常时，添加错误处理机制增强健壮性；使用响应式设计和缓存策略优化布局和性能。针对组件问题，需排查依赖和配置，而平台差异则需定制化处理。通过不断学习和实践，提升开发技能，确保项目成功实施。
土木林森
75 2
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
土木林森
|
5月前
|
存储 移动开发 前端开发
【Uniapp 专栏】Uniapp 架构设计与原理探究
【5月更文挑战第12天】Uniapp是一款用于跨平台移动应用开发的框架，以其高效性和灵活性脱颖而出。它基于HTML、CSS和Vue.js构建视图层，JavaScript处理逻辑层，管理数据层，实现统一编码并支持原生插件扩展。通过抽象平台特性，开发者能专注于业务逻辑，提高开发效率。尽管存在兼容性和复杂性挑战，但深入理解其架构设计与原理将助力开发者创建高质量的跨平台应用。随着技术进步，Uniapp将继续在移动开发领域扮演重要角色。
土木林森
160 1
【Uniapp 专栏】Uniapp 架构设计与原理探究
土木林森
|
5月前
|
编解码 缓存 UED
【Uniapp 专栏】Uniapp 开发实战：打造高效页面布局技巧
【5月更文挑战第12天】在 Uniapp 开发中，高效页面布局关乎用户体验和应用性能。关键技巧包括：规划清晰的页面结构，利用 Flex 布局组件，精确控制元素尺寸和位置，实现响应式设计，保持布局简洁，优化加载性能，恰当运用色彩和字体，添加交互性动画，以及组织良好代码结构。通过不断学习和实践，开发者能创建出美观且高性能的页面，提升应用的整体质量。
土木林森
326 5
土木林森
|
5月前
|
存储 缓存 编解码
【Uniapp 专栏】实用的 Uniapp 性能优化实战策略
【5月更文挑战第12天】本文介绍了提升Uniapp性能的实战策略，包括组件化开发、数据管理与缓存、页面加载优化、资源压缩、代码简化、网络请求优化、路由管理、内存监控、性能测试与监控以及结合平台特性。通过这些方法，可改善用户体验，实现应用性能的持续优化。
土木林森
257 3
极客李华
|
5月前
|
小程序
uniapp项目实践第一章：如何创建uniapp项目
uniapp项目实践第一章：如何创建uniapp项目
极客李华
60 1
前端技术栈
|
5月前
|
缓存 前端开发 JavaScript
前端性能优化的整理笔记（二）
前端性能优化的整理笔记（二）
前端技术栈
96 0