uniapp-使用心得

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