uni-app 加easymock 小案例

效果：

源码：

     

<!-- 设置不使用uni-app的原生标题栏之后，为了不让界面显示到界面的顶端，但是这样就不是沉浸式标题栏-->
<template>
<view v-bind:class="bodyClass">
<view class="status-contents">
<view class="status top-view"></view>

</view>
<view v-bind:class="navClass">
<view v-bind:class="cityClass">{{cityname}}</view>
<view class="section" v-bind:class="serachClass">
<image v-if="!show" id="imgSerach" src="../../static/images/serach.png" v-bind:class="imgserachClass"></image>
<image v-if="show" id="imgSerach" src="../../static/images/serachback.png" v-bind:class="imgserachClass"></image>
<input v-model="inputvalue" @focus="InputFocus(event)" @blur="KeyBlur" @input="KeyInput(event)" placeholder-style="color:white;"
        v-bind:class="inputtextClass" :placeholder=placeholdervalue />
<image v-if="!show" src="../../static/images/voice.png" v-bind:class="imgvoiceClass"></image>
<image v-if="show" src="../../static/images/close.png" @click="closeclick" v-bind:class="closeClass"></image>
</view>
<image src="../../static/images/me.png " v-bind:class="imgpeopleClass"></image>
</view>
<image src="../../static/images/banner.png " v-bind:class="bannerClass"></image>
<view style="background-color: #FFFFFF;display: flex;flex-direction:column;" v-for="(item,index) in infoList" :key="index">
<view style="justify-content:space-between">
<image :src=imagefood v-bind:class="praiseiconClass" style="margin-left: 25upx;"></image>
<image src="../../static/images/praise_icon_fastfood.png" v-bind:class="praiseiconClass"></image>
<image src="../../static/images/praise_icon_sign.png" v-bind:class="praiseiconClass"></image>
<image src="../../static/images/praise_icon_hot.png" v-bind:class="praiseiconClass"></image>
<image src="../../static/images/praise_icon_fun.png" v-bind:class="praiseiconClass" style="margin-right: 25upx;"></image>
</view>
<view style="display: flex;flex-direction: row;justify-content:space-between">
<label v-bind:class="iconfoodtextClass" >{{item.food}}</label>
<label v-bind:class="iconfastfoodtextClass">{{item.fastfood}}</label>
<label v-bind:class="iconsigntextClass">{{item.sign}}</label>
<label v-bind:class="iconhottextClass">{{item.hot}}</label>
<label v-bind:class="iconfuntextClass" >{{item.fun}}</label>
</view>

</view>
<view style="margin-top: 15upx;background: #FFFFFF;display: flex;flex-direction: column;">
<label :class="testfoodClass">必尝美食</label>
<view style="display: flex;flex-direction:row;justify-content:space-between;">
<image :class="praiseimgClass" src="../../static/images/praise_img_duck.png" style="margin-left: 30upx;"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_fish.png"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_fire.png" style="margin-right: 30upx;"></image>
</view>
<view style="display: flex;flex-direction:row;justify-content:space-between;margin-top: 20upx;">
<image :class="praiseimgClass" src="../../static/images/praise_img_liver.png" style="margin-left: 30upx;"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_halogen.png"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_cake.png" style="margin-right: 30upx;"></image>
</view>
</view>
<view style="margin-top: 15upx;background: #FFFFFF;display: flex;flex-direction: column;">
<label :class="testfoodClass">必尝美食</label>
<view style="display: flex;flex-direction:row;justify-content:space-between;">
<image :class="praiseimgClass" src="../../static/images/praise_img_duck.png" style="margin-left: 30upx;"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_fish.png"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_fire.png" style="margin-right: 30upx;"></image>
</view>
<view style="display: flex;flex-direction:row;justify-content:space-between;margin-top: 20upx;">
<image :class="praiseimgClass" src="../../static/images/praise_img_liver.png" style="margin-left: 30upx;"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_halogen.png"></image>
<image :class="praiseimgClass" src="../../static/images/praise_img_cake.png" style="margin-right: 30upx;"></image>
</view>
</view>

</view>
</template>

<script>
   import service from 'service/store.js';
            export default {
        data: function(){
        return {
        cityname: "城市",
        infoList:[{}],
        show: false,
        inputvalue: "",
        placeholdervalue: "手机充值",
        bodyClass: "mian",
        navClass: "nav",
        cityClass: "city",
        serachClass: "serach",
        imgserachClass: "imgserach",
        inputtextClass: "inputtext",
        imgvoiceClass: "inputvoice",
        imgpeopleClass: "imgpeople",
        praiseiconClass: "praiseicon",
        iconfoodtextClass: "iconfood",
        iconfastfoodtextClass: "iconfastfood",
        iconsigntextClass: "iconsigntext",
        iconhottextClass: "iconhottext",
        iconfuntextClass: "iconfuntext",
        testfoodClass: "testfood",
        bannerClass: "banner",
        moneyimgClass:"moneyimg",
        praiseimgClass:"praiseimg",
        closeClass: "close",
        imagefood:"../../static/images/praise_icon_food.png",
        }
        },
        methods: {
        KeyInput: function(event) {
        },
        KeyBlur: function() {
        let self = this;
        self.show = false;
        if (self.inputvalue == "" || self.inputvalue == "null") {
        self.placeholdervalue = "手机充值";
        }
        console.log(self.inputvalue);
        },
        InputFocus: function(event) {
        let self = this;
        self.show = true;
        self.placeholdervalue = "";
        },
        //uni-app 数据请求的方法
        GetInfo:function(){  
        var that=this;
        uni.request({
        url:"https://www.easy-mock.com/mock/********************************",
        success:function(res){
        that.infoList=res.data.data;
        // console.log(this.infoList);
        }
        })
        },

        },
       //async 异步的加载
        async onLoad() {
        var self = this;
        //这里#ifdef APP-PLUS 是兼容h5+,下面的方法是h5+的获取地理位置的方法
        //#ifdef APP-PLUS
        plus.geolocation.getCurrentPosition(function(p) {
        self.cityname = p.address.city;
        console.log("self.cityname"+self.cityname )
        }, function(e) {
        switch (e.code) {
        case e.PERMISSION_DENIED:
        alert('User denied the request for Geolocation.');
        break;
        case e.POSITION_UNAVAILABLE:
        alert('Location information is unavailable.');
        break;
        case e.TIMEOUT:
        alert('The request to get user location timed out.');
        break;
        case e.UNKNOWN_ERROR:
        alert('An unknown error occurred.');
        break;
        }
        }, {
        provider: "baidu",
        timeout: 2000,
        enableHighAccuracy: true
        });
        //#endif
        this.GetInfo();
        }
        }
</script>

在pages.json中，设置titleNView为false，不显示原生标题栏。

"path": "pages/home/index",
     "style": {
           "backgroundColorTop": "#2e87cc",
           "backgroundColorBottom": "#2e87cc",
           "app-plus": {
           "scrollIndicator": "none",
           "titleNView":"false"
                     }
              }

 图标库，可以使用阿里巴巴矢量图标库

 地址：https://www.iconfont.cn/

使用easymock的用处：就是模拟获取的数据

访问https://www.easy-mock.com/，注册，登入

创建自己的项目，

点击编辑接口按钮，自己书写需要模拟的数据，写完格式化，更新下，然后复制接口地址，就可以访问模拟的数据了