https://uniapp.dcloud.io/api/router?id=navigateto

1.对象   转换  JSON

const params = {
  pos_id:data.pos_id,
  pos_name:data.pos_name,
  site_name:data.site_name,
  pay_amount:data.pay_amount,
  order_id:data.order_id
}

console.log(params)
const paramsJson = JSON.stringify(params)


1.JSON   转换对象    

接收后:

const paramsObj = JSON.parse(options.param_data)

1.非tab页面

uni.navigateTo    非 tabBar,可以带参数    保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

uni.redirectTo    非tabBar,可以带参数    关闭当前页面,跳转到应用内的某个页面。

2.tab页面

uni.switchTab

 transform:scale(0.7); 

PUSH    追加数据,下拉加载

/**
* 上拉加载
*/
onReachBottom() {
console.log('上拉加载')
if(this.loading === 'noMore') return
this.page++
this.getUserPosLikeApi()
},
methods:{
getUserPosLikeApi(){
const that = this const params = {
list_rows:that.list_rows,
page:that.page
} that.$myRequest.globalRequest(that.$myRouteApi._getUserPosLikeList,params)
.then((res)=>{
const data = res.data.data // console.log(data)
if (data.length==){
that.loading = 'noMore'
return
}

            // 分页的长度不等于当前的页数
            if (data.length != that.list_rows) {
              that.loading = 'noMore'
            }

                    data.forEach((item)=>{
this.getUserPosLikeList.push(item)
}) })
},
子组件-触发事件后返回到父组件

1.子组件触发点击事件:

js:    that.$emit('demo')

.

<!-- 组件 -->
<view class="userLikePosWrapper">
<list-pos-like :item="item.pos" v-for="item,index in getUserPosLikeList" @demo="hehe" :key="index"></list-pos-like>
</view>
<!-- --> <script>
export default {
data() {
return {
getUserPosLikeList:[], // 收藏的商家列表
}
},
onLoad(options){
console.log('获取自己收藏的商家列表') },
methods:{
hehe(){
console.log('xxxhehe')
}
}
}
</script>
.子组件传值:

methods:{
onCheck(id){
console.log('onCheck:'+id)
// this.chechId = id
this.$emit('send',id)
}
} ---------
<deng-button :listData="oilList" :chechId="chechId" @send="onCheckOilType"></deng-button> onCheckOilType(res){
console.log('-=--------')
console.log(res)
// this.chechId =
}
子组件没有改变时,
增加 监听事件,+data <script>
export default {
props:{
listData: {
type: Array,
default () {
return []
}
},
chechId: {
type: Number,
default: ''
}
},
// 可以监听 data props 值的变化
watch: {
chechId(newVal) {
this.id = newVal
}
},
data() {
return {
id:
};
},
methods:{
onCheck(id){
console.log('onCheck:'+id)
// this.chechId = id
this.$emit('send',id)
}
}
}
</script>
1. 自定义组件:

//  components/组件名/组件名.vue

则不需要

<script>
  import tabbar from '@/components/tabbar/tabbar.vue'
  export default {
  components:{
    tabbar
  },
  data() {

    return {

    };

  }

</script>


 box-sizing: border-box;
只允许在盒内显示

     display: flex;
justify-content: center;
align-items: center;
padding: 15rpx;
box-sizing: border-box;

==================================

box-sizing:border-box  让它在盒内显示,,不会超出了
padding: 15px <view :style="{height:statusBarHeight+'px'}"></view> 固定顶部导航栏 position:fixed    [固定漂浮]
.使用阿里图标库

https://ext.dcloud.net.cn/plugin?id=28

点击插件导入
发送短信验证码

this.showSendSms = false
var interval = setInterval(() => {
--this.second
console.log(this.second)
}, )
setTimeout(() => {
clearInterval(interval)
this.showSendSms = true
              this.second = 40
}, )
:style="[{backgroundImage:'url(' + img_all.path + ')' }]"
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in navArray"
:key="index"
@tap="tabSelect"
:data-id="index"
:data-need-type="item.need_type"
>

页面跳转

uni.navigateTo({
'url':'../tripinfo/tripinfo'
})

https://ext.dcloud.net.cn/publisher?id=78736

------------------------------------------------------------

项目配置

main.js

import sign from './pages/home/sign.vue'
Vue.component('sign',sign) pages.json

 {
    "path": "pages/home/sign",
    "style": {}
  },

【index】

<sign v-if="PageCur=='sign'"></sign>

<view class="action" @click="NavChange" data-cur="sign">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/basics' + [PageCur=='sign'?'_cur':''] + '.png'"></image>
</view>
<view :class="PageCur=='sign'?'text-green':'text-gray'">元素</view>
</view>

<template name="sign">
<view>
<cu-custom bgColor="bg-gradual-red" :isBack="true">
<!-- <block slot="backText">返回</block> -->
<block slot="content">图标</block>
</cu-custom>
sign
</view>
</template>

------------------------------------------------------------

1.

const api =   不允许加逗号

bg-gradual-blue

------------

bg-gradual-orange

----

bg-gradual-pink

uniapp-使用心得的更多相关文章

  1. uni-app学习心得和填坑,关于uni-app 打包h5 页面的坑

    第一次使用博客园写博客 1.我写博客的原因,梳理知识,整理思路,好记性不如烂笔头做个记录吧!记录生活! 1.了解 大概在我使用hbuilder的时候,在官网浏览下载的hbuilder时候无意中发现了u ...

  2. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  3. uniapp分包(详尽版)

    PS:本文是笔者对基于uniapp的一小程序项目进行分包后的复盘文档,不足之处请多多指教. 一:分包相关概念 本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术. 主包与分包的概念 1 ...

  4. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  5. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  6. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  7. 我的MYSQL学习心得(三) 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  8. 我的MYSQL学习心得(四) 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  9. 我的MYSQL学习心得(五) 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  10. 我的MYSQL学习心得(六) 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

随机推荐

  1. 靶机-BTRSys 2.1 Walkthrough

    BTRSys 2.1 https://www.vulnhub.com/entry/btrsys-v21,196/ 参考:https://www.jianshu.com/p/9813095ce04d 提 ...

  2. Windows中安装Linux子系统的详细步骤

    早就听说Windows中可以安装Linux子系统,体验了一下,感觉还是不错的,下面直接开始安装和配置步骤吧! 开启Windows中的配置 首先开启开发者模式 打开"所有设置"进入& ...

  3. qt中的拖拽及其使用技巧

    关于qt中的拖放操作,首先可以看这篇官方文档:http://doc.qt.io/qt-5.5/dnd.html 一.QDrag 首先是创建QDrag,可以在mousePressEvent或者mouse ...

  4. js原型链和原型链的继承

    每一个对象都有一个“_proto_”指针,指向实例化该对象的构造函数的原型对象,当该对象没有你想拿到的属性时,解释器会顺着指针不断向上找. 每一个构造你函数都有一个“prototype”属性,指向该构 ...

  5. 聊一聊 MySQL 数据库中的那些锁

    在软件开发中,程序在高并发的情况下,为了保证一致性或者说安全性,我们通常都会通过加锁的方式来解决,在 MySQL 数据库中同样有这样的问题,一方面为了最大程度的利用数据库的并发访问,另一方面又需要保证 ...

  6. HTML-01-HTML格式

    <!DOCTYPE html><!--告诉浏览器这个文档是html5版本的文档声明--> <html> <!--html是我们网页中最大的标签--> & ...

  7. ios---图片缩放

    1.设置scrollview的代理 2.实现如下方法 -(UIView )viewForZoomingInScrollView:(UIScrollView )scrollView{ return se ...

  8. 使用Gradle构建springboot多模块项目,并混合groovy开发

    idea设置本地gradle 打包: build.gradle //声明gradle脚本自身需要使用的资源,优先执行 buildscript { ext { springBootVersion = ' ...

  9. systemctl中添加mysql服务

    由于mysql的版本更新,许多术语有了新含义,所以需要特别指出,mysqld.service 等价于mysqld vim /usr/lib/systemd/system/mysqld.service ...

  10. 2019年,我花了3个月时间备考PMP

    ​ 经过几个月的准备,终于在2019年12月7日完成了PMP的考试,并于1月21日查到了成绩,喜获5A,意料之中.总结这次考试的具体情况:涉及题型虽然都没有超出大纲的范围,但是原题出现的概率似乎不高, ...