模拟网络延迟加载，添加正在加载中图标显示

<view>
<!-- 搜索框开始 -->
    <SearchBar></SearchBar>
    <!-- 搜索框结束 -->

    <!-- 轮播图开始 -->
    <view class="index_swiper">
        <swiper autoplay circular indicator-dots>
            <swiper-item 
            wx:for="{{swiperList}}"
            wx:for-item="swiper"
            wx:key="id"
            >
                <navigator url="/pages/product_detail/index?id={{swiper.id}}">
                    <image src="{{baseUrl+'/image/swiper/'+swiper.swiperPic}}" mode="widthFix"/>
                </navigator>
            </swiper-item>
        </swiper>
    </view>
    <!-- 轮播图结束 -->

    <!-- 商品大类显示开始 -->
        <view class="index_bigType">
        <view class="bigTypeRow">
            <navigator 
            bindtap="handleTypeJump"
            data-index="{{index}}"
            wx:for="{{bigTypeList_row1}}"
            wx:for-item="bigType"
            wx:key="id">
            <image src="{{baseUrl+'/image/bigType/'+bigType.image}}" mode="widthFix"/>
            </navigator>
        </view>

        <view class="bigTypeRow">
            <navigator 
            bindtap="handleTypeJump"
            data-index="{{index+5}}"
            wx:for="{{bigTypeList_row2}}"
            wx:for-item="bigType"
            wx:key="id">
            <image src="{{baseUrl+'/image/bigType/'+bigType.image}}" mode="widthFix"/>
            </navigator>
        </view>
        </view>

        <!-- 商品大类显示 结束 -->

    <!-- 商品热卖推荐开始 -->
<view class="index_hotProduct">
<view class="product_title">热门推荐</view>
<view class="product_list">
<view class="product_detail"
    wx:for="{{hotProductList}}"
    wx:for-item="hotProduct"
    wx:key="id"
>
    <navigator url="/pages/product_detail/index?id={{hotProduct.id}}">
        <image src="{{baseUrl+'/image/product/'+hotProduct.proPic}}" mode="widthFix"/>
        <view class="product_name">{{hotProduct.name}}</view>
        <view class="product_price">{{hotProduct.price}}</view>
        <button size="mini" type="warn">立即购买    </button>
    </navigator>
</view>
</view>
</view>
<!-- 商品热卖推荐结束 -->

</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

//定义请求根路径baseUrl
const baseUrl="http://localhost:8080";

//同时并发请求的次数
let ajaxTimes=0;
/**
 * 返回请求根路径baseUrl
 * 
 */
export const getBaseUrl=()=>{
    return baseUrl;
}


/**
 * 
 * @param {后端请求工具类} params 
 */
export const requestUtil=(params)=>{

    var start=new Date().getTime();
    console.log(start)

    ajaxTimes++;
    wx.showLoading({
      title: '加载中...',
      mask:true
    })

    //模拟网络延迟加载...
    while(true){
        if(new Date().getTime()-start>3*1000)break;
    }

    return new Promise((resolve,reject)=>{
        wx.request({
            ...params,
            url:baseUrl+params.url, 
            success:(result)=>{
                resolve(result.data)
            },
            fail:(err)=>{
                reject(err)
            },
            complete:()=>{
                ajaxTimes--;
                if(ajaxTimes==0){
                    wx.hideLoading();   //关闭加载图标
                }
            }
        })
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53