学习uniapp

使用iconfont获取图标

https://www.iconfont.cn/

1.购物车(选中/未选中)

2.首页(选中/未选中)

3.我的(选中/未选中)

4,分类(选中/未选中)

5.新建(选中/未选中)

6.放大镜(搜索)

7.上箭头

8.下箭头

9.垃圾桶

10.消息

创建页面和底部框(tabbar)

1.首页:index

2.分类:list

3.新建:new

4.我的:my

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
"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/index.png",
        "selectedIconPath": "static/tabbar/indexSelected.png",
        "text": "首页"
    },{
        "pagePath": "pages/list/list",
        "iconPath": "static/tabbar/list.png",
        "selectedIconPath": "static/tabbar/llistSelected.png",
        "text": "分类"
    },{
        "pagePath": "pages/new/new",
        "iconPath": "static/tabbar/new.png",
        "selectedIconPath": "static/tabbar/newSelected.png",
        "text": "新建"
    },{
        "pagePath": "pages/my/my",
        "iconPath": "static/tabbar/my.png",
        "selectedIconPath": "static/tabbar/mySelected.png",
        "text": "我的"
    }]
}

最终成果截图

创建顶部图(swiper)

IndexSwiper.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item>
			<view class="swiper-item">
				<image class="swiper_img" src="@/static/img/swiper1.jpg"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image class="swiper_img" src="@/static/img/swiper2.jpg"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image class="swiper_img" src="@/static/img/swiper3.png"></image>
			</view>
		</swiper-item>
	</swiper>
</template>

app需改变默认高度

2023.11.24