
uni-app
一个前端不会用git
菜。
展开
-
页面跳转带多个参数,然后使用数据 (笔记
const params ={ a:1, b:2, c:3}//Object.entries() 可以把一个对象的键值以数组的形式遍历出来//Array.reduce()数组累加器//url 就是 拼 key=value const url = Object.entries(params).reduce((res,[key,value],index)=>res+=`${index===0?'?':'&'}${key}=${value}`,http://xxxx/');c原创 2021-11-19 15:36:29 · 2725 阅读 · 0 评论 -
uniapp打开第三方app,然后给传参过去
参考链接:uniapp唤醒uniapp并传递参数,vue唤醒第三方应用并传递参数.参考链接:Runtime模块管理运行环境.<template> <view class="content"> <button type="default" @click="jsCallNativeActivity()">点击打开demo</button> </view></template><script> export .原创 2021-09-15 16:00:42 · 1631 阅读 · 0 评论 -
云发布版 uniapp 接入极光推送,并点击消息进入app(前端部分)
1.首先找到uniapp这个链接: JYJPush极光推送插件.分试用版和正式版,先用试用版本2.选择要使用的账号,绑定上3.打开你的hbulider的manifest.json进行插件配置选择app原生插件配置,选择云端插件,输入appkey,和channel(不知道填什么就填ios或者android),问题:如何获取appkey, 链接: 服务中心-极光.(先登录自己的账号,再点击这个链接)4.极光后台配置4.1首先创建我们应用创建好之后,进入应用设置,在对应位置获取a原创 2021-07-01 16:49:50 · 3756 阅读 · 10 评论 -
选中复选框列表里为true的 数据集合{id:选择数量}。
选中checked,状态为true,然后把它的商品id,和选择数量提交用;第一步:先得到所有的数据,进行列表渲染循环,这里用的uview里的u-checkbox-group和u-checkbox <u-checkbox-group @change="checkboxGroupChange" style="width:100%"> <u-checkbox style="padding-left: 20px;" @change="checkboxChange" v-mode..原创 2021-06-09 14:45:17 · 811 阅读 · 0 评论 -
uview u-select单列使用(加数据交互)
<!-- 电力——电力参数——电力类别 组件内容--><template> <view class="leave_cont"> <view class="content-list"> <u-icon name="rewind-right" color="#2E95FF" size="28"></u-icon> <view class="posit">类型</view> <view原创 2021-05-18 09:55:26 · 4923 阅读 · 0 评论 -
for循环取出不同下标值里的数据,并去掉多余的,
我要获取下标里所有的datalet imgpat = this.$refs.uUpload.lists;for (var i = 0; i < imgpat.length; i++) { console.log(imgpat[i].response.data)}原创 2021-05-14 14:32:23 · 335 阅读 · 0 评论 -
解决uniapp获取api的返回值丢失为Null
//使用getlocation这个api获取位置 onShow() { //通过that 替换this,防止值的丢失 let that = this; uni.getLocation({ type: 'wgs84', geocode: true, success: function(res) { that.longitude = parseFloat(res.longitude); that.latitude = parseFloat(res.原创 2021-05-13 16:14:02 · 1651 阅读 · 0 评论 -
强制uniapp刷新当前页面
setTimeout(() => { this.$router.go(0)}, 400)原创 2021-05-12 14:48:31 · 23803 阅读 · 7 评论 -
点击列表,根据多条(参数)进入详情页
1.循环数据2.绑定要传递的值到跳转上3.通过绑定链接跳转4.新页面通过onload(option)在页面加载初期获取数据<view class="grouping" v-for="(item,index) in items"><!--传递staionid,和图片进入下一个,先绑定到tap上--> <view class="groupinglink"> <view class="button" @tap="goimage(item.station_i原创 2021-05-11 13:58:59 · 281 阅读 · 0 评论 -
new Set实现数组去重(根据名称重分数组)
使用的数据 "typeDevice" : [ { "value_info" : 2, "info_name" : "123", }, { "value_info" : 2, "info_name" : "123", }, { "value_info" : 3, "info_name" : "33131", }, { "value_info" : 5, "info_name" : "123",原创 2021-04-26 16:17:40 · 712 阅读 · 0 评论 -
根据不同的点击内容,展示数据(event)
1.第一步,先从后台获取到你要用的id2.第二步,循环出来所有数据,渲染到页面上3.第三步,给你要点击的绑定上监听事件,绑定id4.第四步,根据你点击的id,再拿去请求接口调用数据 <view> <!--transList里面有我们要用的仪表id,首先先循环它--> <!--绑定一个点击监听事件 selectTransId,到这一步先看methods的内容,和上面的events知识点--> <view v-for="item in ..原创 2021-04-15 14:40:34 · 356 阅读 · 0 评论 -
ucharts,数据交互
<template> <view> <view class="ucharts-tit">kw.h</view> <view class="qiun-charts"> <canvas canvas-id="ExtremunColumn" id="ExtremunColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="原创 2021-04-13 11:43:00 · 1642 阅读 · 0 评论 -
uniapp vue 子组件触发父页面scrow-view触底事件(下拉加载)
最近再也uniapp,结果发现子组件没有页面级生命周期 ,onReachbotton没办法直接使用,所以用了子组件监听父组件选项卡触底事件。父页面<!--这里用的uniapp里的uview框架的选项卡,配置省略--><swiper-item class="swiper-item"> <!-- 查看文档,用的是@scrolltolwer这个选项卡触底,绑定事件--> <scroll-view scroll-y style="height: 100%;wi原创 2021-03-23 10:33:00 · 1854 阅读 · 0 评论 -
带弹出框的自定义导航页面
<template> <view> <!-- 自定义导航 --> <u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true" :background="background" :title="title" :back-icon-name="backIconName" :back-text="backText"> <vi原创 2021-03-12 16:53:51 · 212 阅读 · 0 评论 -
u-select uniapp 选择使用
具体配置参考u-view官方,此处只使用,方便自己项目复用<template> <view class="leave_cont"> <view class="subNav"> <view class="subNav-icon icon"> <image src="../static/img/home/pickera-icon.png" mode=""></image> </view> &.原创 2021-03-12 11:22:56 · 13931 阅读 · 1 评论 -
uni-popup 弹出框 组件(整理方便复用)
1.具体配置参考uni-pop组件,这里仅使用<template> <view> <!--点击图片弹出 --> <view class="chooise-icon" @click="toggle('center')"> <image src="../../../../static/img/home/ycyx_chooise.png" mode=""></image> </view> <!--原创 2021-03-10 16:04:53 · 5469 阅读 · 0 评论 -
uview u-app选项卡配置
1.基础配置依赖,参考uview官网2.附源码(如果想让选项平均分布,把:is-scroll改成false) <view class="wrap"> <view class="u-tabs-box"> <u-tabs-swiper activeColor="#ffffff" :bold="false" inactive-color="#ffffff" ref="tabs" :list="list" :current="current" @chang原创 2021-03-09 14:06:13 · 2860 阅读 · 4 评论 -
uview自定义导航栏(自定义返回路径)
依赖包:uview框架配置1.pages.json页面关闭原生的导航栏{ // 待办事项 "path" : "pages/home/backlog/backlog/backlog", "style" : { "navigationS原创 2021-03-09 13:48:51 · 10345 阅读 · 8 评论 -
Vue 切换页面 编辑状态
<template> <view> <!--uview 自定义导航 --> <u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true" :background="background" :title="title" :back-icon-name="backIconName" :back-text="backText">原创 2021-03-06 10:21:53 · 872 阅读 · 0 评论 -
vue 根据后台字段的状态,显示不同图片
require() 用于引入模块、 JSON、或本地文件。 可以从 node_modules 引入模块。 可以使用相对路径(例如 ./、 ./foo、 ./bar/baz、 ../foo)引入本地模块或 JSON 文件,路径会根据 __dirname 定义的目录名或当前工作目录进行处理。// 引入本地模块:const myLocalModule = require('./path/myLocalModule');// 引入 JSON 文件:const jsonData = require('./原创 2021-03-01 11:46:41 · 3163 阅读 · 3 评论 -
vue 监听添加样式,并移除兄弟节点上的样式(选项卡)
基础html <telemplate> <view class="menu-tab-content"> <!--通过循环列表,监听列表index,判断点击添加样式--> <!--给点击的index添加样式--> <!--绑定样式--> <view class="content-tabs" v-for="(item, index) in dataList" v-on:click="addClass(ind.原创 2021-02-22 16:19:56 · 917 阅读 · 0 评论 -
uniapp uview 通过 “时间戳” 实现日历 点击上一月,下一月的功能组件
借鉴链接: js 写点击上一月 下一月时候切换.实现:html:引用的是uview的日期控件<template> <view class="chooise-data"> <view class="yesterday" @click="prevDate()"> 上一月 </view> <view class="chooise-box"> <view class="date"> <view cl原创 2021-02-22 15:01:34 · 2623 阅读 · 1 评论 -
uniapp uview 通过 “时间戳” 实现日历 点击上一日,下一日的功能组件
示例图第一步,页面引用日期控件 步骤 (参考uniapp官方文档)<template> <view class="chooise-data"> <view class="yesterday" @click="prevDate()"> 上一日 </view> <view class="chooise-box"> <view class="date"> <view class="calendar原创 2021-02-22 11:28:22 · 3984 阅读 · 0 评论 -
vue 显示获取系统当前日期
<template> <view>{{result}}</view></template><script> export default { data() { //接收当前时间 const currentDate = this.getDate({ format: true }) //双向绑定 return { result: currentDate, }; }, metho原创 2021-02-20 15:46:02 · 3196 阅读 · 0 评论 -
uniapp使用树状组件插件
第一步,下载组件包 uni app 插件下载 复制到项目里,根据目录里README.md 文档进行需求配置view部分:<template> <view> <view class="subNav"> <view class="subNav-icon icon2"> <!--@tap="showTree"唤醒树组件--> <image src="../static/img/admin/right.png" @原创 2021-02-20 14:11:40 · 9232 阅读 · 4 评论 -
vue $emit 子组件向父组件传值
子组件通过$emit传递数值<!--子组件传值到父组件 通过$emit--><template> <view class="leave_cont"> <view class="flex1"> <view>日期: </view> <picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateCh原创 2021-02-04 09:59:16 · 204 阅读 · 0 评论 -
uni app 根据选项卡下标跳转对应选项卡页面
A页面根据下标跳转B选项卡的对应位置<!--A页面 先给一个对应num--><view class="night-box"> <view @tap="goincident(0)">遥测越线</view> <view @tap="goincident(1)">遥信变位</view> <view @tap="goincident(2)">仪表离线</view> <view @tap="goincid原创 2021-02-03 14:43:40 · 1098 阅读 · 1 评论 -
uniapp 列表搜索模糊查询
<!-- 第一次进入,选择变电站 --><template> <view> <!-- 正文 --> <view class="content"> <!--搜索--> <view class="search"> <u-search placeholder="请输入关键字" shape="square" :show-action="false" @search="原创 2021-02-02 16:31:19 · 6054 阅读 · 3 评论 -
uniapp 更改原生按钮的样式
/*style样式中加入scoped(私有化) class前面加/deep/(穿透)*/<style scoped> /deep/.uni-input-input{ /*deep样式穿透,直接从底部修改*/ font-size: 18px !important; } /deep/button{ font-size: 18px !important; }</style><!--仅用于自己遇到的问题整理,不做它用-->...原创 2021-01-30 17:16:03 · 4029 阅读 · 2 评论 -
uni-app 地图标记点 循环显示所有marker
<template> //uniapp 地图插件引入 <view class="uni-common-mt" style="margin:0"> <view> <map :latitude="latitude" :longitude="longitude" :markers="covers" v-if="mapCanLoad"> </map> </view> </view> //地图插件引用结束原创 2021-01-30 17:08:48 · 3045 阅读 · 1 评论