uniapp商城基礎示例

第一章:首頁

首先咱們要知道一個事情，Unicode都支持

可是那兩個，有時候你會發現部分手機或者瀏覽器亂碼

---

下載後會有一個包，名字基本相同"iconfont"
咱們只拿走2樣東西，iconfont.css和iconfont.ttf
如圖:home裏面header就是頂部搜索欄，iconfont就是咱們剛纔下載的css

把css調試成這樣，等會直接在app.vue裏全局使用

---

less或sass安裝

以前我提過，建立uniapp以後須要安裝less組件
可是安裝他默認關閉！須要本身開啓。

---

咱們將這裏建立以後！就把這些跟Vue同樣

<template>
    <view class="header">
        <view class="addr">
            <view class="icon iconfont">
                &#xe650;
            </view>
            {{city}}
        </view>
        <!--↑這個是當前座標， 以及左側圖標-->
        
        <view class="input-box">
            <input type="text" placeholder="請搜索你想要的" placeholder-style="color:    #c0c0c0" />
            <view class="icon iconfont">
                &#xe65c;
            </view>
        </view>
        
        <view class="icon-btn">
            <view class="icon iconfont">
                &#xe70a;
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                city:"北京"
            }
        }
    }
</script>

<style lang="less">
    .header {
        width: 92%;
        padding: 0 4%;
        height: 100upx;
        display: flex;
        align-items: center;
        position: fixed;
        z-index: 10;
        background-color: #fff;
        top: 0;
        /*  #ifdef  APP-PLUS  */
        top: var(--status-bar-height);
        /*  #endif  */
    
        .addr {
            width: 120upx;
            height: 60upx;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            font-size: 28upx;
            .icon {
                height: 60upx;
                margin-right: 5upx;
                display: flex;
                align-items: center;
                font-size: 42upx;
                color: #ffc50a;
            }
        }
        .input-box {
            width: 100%;
            height: 60upx;
            background-color: #f5f5f5;
            border-radius: 30upx;
            position: relative;
            display: flex;
            align-items: center;
            .icon {
                display: flex;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                width: 60upx;
                height: 60upx;
                font-size: 34upx;
                color: #c0c0c0;
            }
            input {
                padding-left: 28upx;
                height: 28upx;
                font-size: 28upx;
            }
        }
        .icon-btn {
            width: 60upx;
            height: 60upx;
            flex-shrink: 0;
            display: flex;
            .icon {
                width: 60upx;
                height: 60upx;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 42upx;
            }
        }
    }
    .place {
        background-color: #ffffff;
        height: 100upx;
        /*  #ifdef  APP-PLUS  */
        margin-top: var(--status-bar-height);
        /*  #endif  */
    }
</style>

---

上面的header.vue引過來
在Home這裏會有一個問題，該死的頂部有標題嚴重錯位

<template>
    <xHeader></xHeader>
</template>

<script>
    import xHeader from "./header.vue"
    export default{
        data(){
            return{
                
            }
        },
        components:{
            "xHeader":xHeader
        }
    }
</script>