一、
1.pages.json
{ "pages": [ { "path": "pages/index/index" }, { "path":"pages/news/news", "style":{ } }, { "path": "pages/cart/cart" }, { "path": "pages/member/member" } ], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "高格商城", "navigationBarBackgroundColor": "#CD0000", "backgroundColor": "#DBDBDB" }, "tabBar":{ "color":"#CCCCCC", "selectedColor":"#CD0000", "list":[ { "text":"首页", "pagePath":"pages/index/index" // "iconPath":"", // "selectedIconPath":"" }, { "text":"资讯", "pagePath":"pages/news/news" }, { "text":"购物车", "pagePath":"pages/cart/cart" }, { "text":"会员", "pagePath":"pages/member/member" } ] } }
2.轮播图
circular:是否采用衔接滑动,即播放到末尾后重新回到开头
indicator-dots:是否显示面板指示点
autoplay:是否自动切换
interval:自动切换时间间隔
duration:滑动动画时长
<template> <view > <!-- banner轮播图 --> <view class="page-section-spacing"> <swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3500" duration="600"> <swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index"> <view class="swiper-item uni-bg-red"> <image class="swiper-img" :src="item.imageUrl" mode=""></image> </view> </swiper-item> </swiper> </view> </view> </template> <script> export default { data() { return { // tip:"点击「添加小程序」,下次访问更便捷", bannerList: [ { imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner.png', }, { imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png', }, { imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png', }, { imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner2.png', } ], } }, onLoad() { }, methods: { } } </script> <style lang="scss"> .swiper-item { width: 100%; height: 100%; image { width: 100%; height: 100%; } } </style>
3.导航
<template> <view > <!-- 导航 --> <view> <view class="nav"> <view class="nav-item"> <view> <u-icon name="car" color="#F08080" size="48"></u-icon> </view> <text>购物商城</text> </view> <view class="nav-item"> <view> <u-icon name="gift" color="#B0C4DE" size="48"></u-icon> </view> <text>需求定制</text> </view> <view class="nav-item"> <view> <u-icon name="file-text" color="#D15FEE" size="48"></u-icon> </view> <text>文章资讯</text> </view> <view class="nav-item"> <view> <u-icon name="grid" color="#BCD2EE" size="48"></u-icon> </view> <text>最新好物</text> </view> </view> </view> </view> </template> <script> export default { } </script> <style lang="scss"> .nav { display: flex; width: 100%; text-align: center; height: 50rpx; line-height:50rpx; color: #999999; margin: 10rpx auto; .nav-item { width: 25%; } } </style>
4.商品列表结构
5.点击导航,跳转到不同页面
data:
methods:
6.封装商品列表组件(复用)
子组件:
父组件传值:
7.实现上拉加载更多和下拉刷新
(1)onReachBottom 上拉加载更多
(2) enablePullRefresh下拉刷新 (先在pages.json中配置)
onPullDownRefresh
8.拨打电话 uni.makePhoneCall
9.地图
<map></map>
10.实现左侧分类导航栏
(1)scroll-view 可滚动视图区域 组件。 属性scroll-y:纵向滚动
(2)点击高亮(点击当个分类,样式不同)
11.分类左侧对应的右侧数据
(1)获取点击分类的id(后台返回的id):请求参数
(2)发送请求:参数为点击的id
(3)展示右侧
(4)左侧初始化显示
(5)处理无数据
12. 图片预览
uni.previewImage 参数current,urls
13.跳转详情页(id)
14.处理时间 全局过滤器
15.rich text 富文本
(1)
(2)处理溢出
App.vue 全局样式
16.商品详情页 底部导航 (扩展组件 uni ui)
https://ext.dcloud.net.cn/plugin?id=865
不显示,层级原因。
底部导航影响上边padding-bottom
17.小程序打包发布
18.h5打包
19.安卓打包