示例

index.vue

<template>
    <view class="container">
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view class="nav_bar">
            uni-app首页
        </view>
        <view class="intro" hover-class="mianActive">hello</view>
        <view>
            <text class="intro">长按文本【不】选中</text>
        </view>
        <view>
            <text class="intro" selectable>长按文本【可】选中</text>
        </view>
        <view>
            <text class="intro" selectable space="emsp">hel lo</text>
        </view>
        <view>
            <text class="intro" selectable space="ensp">hel lo</text>
        </view>
        <view>
            <text class="intro" selectable space="nbsp">hel lo</text>
        </view>
        <view>
            <!-- 如果使用image组件，则需要添加mode="widthFix"属性，
            因为image组件有320px×240px的默认样式，使用前要先清除默认样式 -->
            <image src="../../static/c1.png" mode="widthFix" @click="testClick"></image>
        </view>
        <uni-link :href="href" :text="href"></uni-link>
        <view class="swiper">
            <!-- indicator-dots属性：是否显示指示点 -->
            <!-- indicator-color属性：设置指示点颜色。 -->
            <!-- indicator-color属性：设置指示点颜色。 -->
            <!-- autoplay属性：轮播图是否自动切换。 -->
            <!-- interval属性：轮播图自动切换的时间间隔 -->
            <!-- duration属性：滑动动画时间。 -->
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(item,idx) in images" :key="idx">
                    <view class="swiper-item">
                        <image :src="item" mode="widthFix"></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <tab-bar :curRoute="curRouter"></tab-bar>
    </view>
</template>

<script>
    import TabBar from "../../components/tab-bar"
import loginVue from "../login/login.vue";
    export default {
        data() {
            return {
                curRoute:"",
                href: 'https://uniapp.dcloud.io/component/README?id=uniui',
                images:[
                    "../../static/c1.png",
                    "../../static/c2.png",
                    "../../static/c3.png",
                    "../../static/c4.png",
                    "../../static/c5.png",
                    "../../static/c6.png",
                ]
            }
        },
        components:{
            TabBar
        },
        onLoad() {
            let pages = getCurrentPages();
            let curPage = pages[pages.length-1]
            this.curRoute = curPage.route;
            console.log(this.$config.baseApi);
        },

        onShow() {
            let branchShopId = uni.getStorageSync("branch_shop_id")
            console.log(branchShopId);
        },
        methods: {
            testClick(){
                console.log("testClick");    
            }

        }
    }
</script>

<style>
    .container {

        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }
    .mianActive{
        background: red;
        color:#333;
    }
    .swiper{
        width: 100vw;
        /* height: 100vh; */
    }
</style>

my.vue

<template>
    <view>
        <navigator url="../card/card" hover-class="navigator-hover">
            <button type="default" class="btn">跳转到列表页</button>
        </navigator>
        <text>switchTab 会清空其他tab的页面栈</text>
        <navigator url="../list/list" open-type="switchTab">
            <button type="default" class="btn">切换tab</button>
        </navigator>
        <text>redirectTo可解决小程序跳转10层限制，使用页面重定向跳转</text>
        <navigator url="../card/card" open-type="redirect">
            <button type="default" class="btn">跳转redirectTo</button>
        </navigator>

        <navigator open-type="navigateBack">
            <button type="default">返回上一页</button>
        </navigator>
        <navigator open-type="reLaunch">
            <button type="default">跳转到首页-全部出栈</button>
        </navigator>

        <button type="default" @click="pageNavigate">页面跳转-navigateTo</button>
        <button type="default" @click="pageNavigate2">页面跳转-switchTab</button>
        <button type="default" @click="pageNavigate3">页面跳转-redrectTo</button>
        <button type="default" @click="goBack()">返回</button>
        <navigator url="../demo/demo">示例</navigator>
        <button type="default"
            @click="pushPage('/pages/card/card?id=3&key='+encodeURIComponent('商品信息'))">查看商品信息</button>
        <button type="default" @click="pushPage('../card/card?id=3&key='+encodeURIComponent('商品信息'))">查看商品信息2</button>
        <!-- 將当前页面的路由地址传递给tabbar组件 -->
        <tab-bar :curRoute="curRouter"></tab-bar>
    </view>
</template>

<style>
    .page {
        width: 100%;
        height: 100vh;
    }

    .navigator-hover {
        width: 100%;
        height: 150rpx;
        background-color: #F56C6C;
        opacity: 1;
        display: flex;
        align-items: center;
    }

    .btn {
        width: 50%;
        height: 80rpx;
        border-radius: 0px;
        /* background-color: #ccc; */
    }

    .btn::after {
        /* 隐藏button元素的默认边框 */
        border: 0 none;
    }
</style>
<script>
    import TabBar from "../../components/tab-bar"
    export default {
        data() {
            return {
                curRoute: "",
            }
        },
        components:{
            TabBar
        },
        onLoad() {
            let pages = getCurrentPages()
            this.pageCount = pages.length;
            let curPage = pages[pages.length - 1]
            this.curRoute = curPage.route
        },

        methods: {

            pushPage(url) {
                if (this.pageCount >= 10) {
                    uni.redirectTo({
                        url: url
                    })
                } else {
                    uni.navigateTo({
                        url: url
                    })
                }
            },
            goBack() {
                uni.navigateBack({
                    delta: 1 // 指定返回的页面数
                })
            },
            pageNavigate() {
                let id = 123
                let key = encodeURIComponent("商品信息")
                uni.navigateTo({
                    url: `/pages/card/card?id=${id}&key=${key}`
                })
            },
            pageNavigate2() {
                uni.switchTab({
                    url: "/pages/index/index"
                })
            },
            pageNavigate3() {
                uni.redirectTo({
                    url: "/pages/card/card"
                })
            }
        }
    }
</script>

mapguide

<template>
    <view class="page">
        <!-- <image src="../../static/mapguide2.jpg" mode="widthFix" class="map"></image> -->
        <view class="map"></view>

    </view>
</template>

<script>

    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .page{
        width: 100vw;
        height: 100vh;
        .map{
            background-image: url("https://diyai.cn/mynotes/mapguide.jpg");
            background-size: 100% 100%;
        }
    }

</style>

main.vue

<template>
    <view class="page">
        <view class="status_bar bg-color">
        </view>
        <view class="header">
            <view :class="{'search-header':true,'ipx':false}">
                <view class="search-wrap">
                    <view class="icon">
                    </view>
                    <view class="search">
                        输入商家名或菜品
                    </view>
                </view>
            </view>
        </view>
        <view :class="{'shop-main':true,'ipx':false}">
            <view class="shop-list" v-for="(item,index) in items" :key="index">
                <view class="shop-wrap">
                    <view class="image">
                        <image src="https://diancan.lucklnk.com/businessfiles/logo/1600743948.jpg" mode="widthFix" :lazy-load="true"></image>
                    </view>
                </view>
                <view class="shop-info">
                    <view class="shop-name">
                        {{item.name}}
                    </view>
                    <view class="distance">
                        {{item.distance}}
                    </view>
                    <view class="address">
                        {{item.address}}
                    </view>
                    <view class="pack-btn">
                        {{item.pack_btn}}
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                items:[
                    {
                        name:"商品",
                        distance:"0.5KM",
                        address:"北京石景山",
                        pack_btn:"外卖"
                    },
                    {
                        name:"商品",
                        distance:"0.5KM",
                        address:"北京石景山",
                        pack_btn:"自提"
                    },
                    {
                        name:"商品",
                        distance:"0.5KM",
                        address:"北京石景山",
                        pack_btn:"自提"
                    }
                ]
            }
        },
        methods: {

        }
    }
</script>

<style scoped lang="scss">
.page{
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    .status_bar.bg_color{
        background-color: #E30019;
    }
    .header{
        width: 100%;
        background-color: #eb1625;
        overflow: hidden;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 90;
        .search-wrap{
            width: 80%;
            height: 52rpx;
            background-color: rgba(255, 255,255,0.9);
            border-radius: 5px;
            display: flex;
            justify-content: start;
            align-items: center;
            .icon{
                width: 44rpx;
                height: 44rpx;
                background-image: url("https://diyai.cn/mynotes/images/main/search_icon.png");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                margin: 0 20rpx;
            }
            .search{
                font-size: 28rpx;
                color: #999999;
            }
        }
    }
    .shop-main{
        width: 100%;
        margin-top: 220rpx;
        .ipx{
            margin-top: 260rpx;
        }
        .shop-list{
            width: 100%;
            border-bottom: 1px solid #efefef;
            box-sizing: border-box;
            padding: 20rpx 0;
            .shop-wrap{
                width: 92%;
                height: auto;
                margin: 0 auto;
                display: flex;
                justify-content: start;
                .image{
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 20rpx;
                    image{
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                    }
                }
            }
            .shop-info{
                width: 72%;
                clear: both;
                .shop-name{
                    font-size: 32rpx;
                    font-weight: bold;
                    width: 100%;
                    height: 45rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .distance{
                    font-size: 28rpx;
                    color: #666666;
                    margin-top: 10rpx;
                    width: 100%;
                    height: 45rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .pack-btn{
                    padding:10rpx 20rpx;
                    font-size: 28rpx;
                    color: #ffffff;
                    background-color: #eb1625;
                    width: auto;
                    height: auto;
                    display: table;
                    margin-top: 10rpx;
                    border-radius: 5px;
                    float: right;
                    .disable{
                        color:#666666;
                        background-color: #efefef;
                    }
                }
            }
        }
    }
}


.search-header{
    width: 100%;
    height: 170rpx;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 40rpx;
    box-sizing: border-box;
    padding-bottom: 20rpx;
    .ipx{
        height: 210rpx;
    }
}

</style>

list/list.vue

<template>
    <view class="content">
        <view class="item" v-for="(item,index) in newsList" :key="index">
            {{item}}
        </view>
        <button type="default" @click="btn">下拉刷新</button>

    </view>
</template>

<script>
import loginVue from '../login/login.vue';
    export default {
        data() {
            return {
                newsList : ['新闻1','新闻2','新闻3','新闻3',
                '新闻3','新闻3','新闻3','新闻3',
                '新闻3','新闻3','新闻3','新闻3',
                '新闻3','新闻3','新闻3','新闻3',
                '新闻3','新闻3','新闻3']
            }
        },

        onPullDownRefresh() {
            console.log("下拉刷新");
            this.newsList = ['新闻4','新闻5','新闻6']
            uni.stopPullDownRefresh()
        },

        onReachBottom() {
            console.log("页面触底");
            this.newsList = [...this.newsList,...['新闻31','新闻32','新闻33']]
        },

        methods: {
            btn(){
                uni.startPullDownRefresh()
            }

        }
    }
</script>

<style>
    .item{
        height: 50px;
    }

</style>

gravity-picture

<template>
    <view>
        <image src="../../static/uni.png" mode="widthFix"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },

        onLoad() {
            window.addEventListener('deviceorientation', this.handleFunc, false);
        },
        methods: {
            handleFunc(event){
                console.log(event);
                var alpha = event.alpha;
                var beta = event.beta;
                var gamma = event.gamma;
                // let { beta, gamma } = event;
                // beta = Math.round(beta)
                // gamma = Math.round(gamma)
                // let X = Math.round(gamma / 9)
                // let Y = Math.round(beta / 18- 5)

                // console.log(X,Y);
                // this.cloud.style.transform = `translate(${X}px, ${Y}px)`
                // this.light.style.transform = `translate(${X * 3}px, ${Y * 3}px)`
                // this.heart.style.transform = `translate(${X * 4}px, ${Y * 4}px)`
                // this.dots.style.transform = `translate(${X * 6}px, ${Y * 6}px)`

             }
        }
    }
</script>

<style>

</style>

custin-status

<template>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view class="nav_bar">
            uni-app首页
        </view>

        <view class="bg">

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
.status_bar{
    height: var(--status-bar-height--);
    background-color: #3cc51f;
    width: 100%;
}
.nav_bar{
    width: 100%;
    height: 80px;
    background-color: #3cc51f;
    color: #ffffff;
    text-align: center;
    line-height: 100rpx;
    font-size: 28rpx;
}
.bg{
    width: 200rpx;
    height: 200rpx;
    background-image: url("~@/static/c1.png");
}
</style>

pages

<template>
    <view>
        <button type="default" @click="login">前往登录</button>
    </view>
</template>

<script>
import loginVue from '../login/login.vue';
    export default {
        data() {
            return {

            }
        },
        onLoad(opts){
            console.log(opts.id);
            console.log(decodeURIComponent(opts.key));

            let pages = getCurrentPages()
            console.log("页面栈数",pages.length);
            let firstPage  = pages[0]
            console.log(firstPage.route);

            let curPage = pages[pages.length-1]
            console.log(curPage.route);
        },
        methods: {
            login(){
                uni.switchTab({
                    url:"../login/login"
                })
            }
        }
    }
</script>

<style>

</style>