首页 ›  文章

vue2-elm学习记录(Day8)

2019-12-02

<shop-list :geohash="geohash" :restaurantCategoryId="restaurant_category_id", :restaurantCategoryIds="restaurant_category_ids", :sortByType="sortByType", :deliveryMode="delivery_mode", :confirmSelect="confirmStatus", :supportIds="support_ids", v-if="latitude"> </shop-list>

### "商铺"详情页面:

![image.png](https://img.javascriptcn.com/4cee8ed04e6af7daaa0773af4f2a7110 "image.png")

##### 实现一:初始状态,显示加载动画和默认图

![image.png](https://img.javascriptcn.com/276be5ec3b0fc934cc5714bab5370021 "image.png")
<template>
    </section>
    <!--showLoading值为true或者需要加载更多评论时显示加载组件loadRating为true,
        需要引入loading组件-->
    <loading v-show="showLoading||loadingRating"></loading>
    <!--和加载动画同时存在的默认背景图-->
    <section class="animation_opactiy shop_back_svg_container" v-if="showLoading">
        <img src="../../images/shop_back_svg.svg">
    </section>
</div>
</template> ```

JS:部分

//引入加载动画组件
import loading from "../../components/common/loading";
export default{
    data(){
        return{
            //显示加载动画
            showLoading:true,
            //加载更多评论时显示加载组件
            loadRatings:false
        };
    },
    components:{
        loading
    },
    methods:{
        //初始化
        async initData(){
            //获取数据
            ...
            //页面数据加载完成之后执行隐藏动画
            this.hideLoading();
        },
        //隐藏动画
        hideLoading(){
            this.showLoading=false;
        }

    }

}
实现二:店铺详情页header部分

image.png

```

<router-link to class="description_top">

{{shopDetailData.name}}

商家配送/{{shopDetailData.order_lead_time}}分钟送达/配送费¥{{shopDetailData.float_delivery_fee}}

公告:{{promotionInfo}}

<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow" > <path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none" /> </svg> </router-link>
原文链接:segmentfault.com

上一篇:彻底搞清 JavaScript forEach & map
下一篇:输入框模糊搜索
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入