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. Carrousel
Circulaire : utiliser ou non la connexion coulissante, c'est-à-dire revenir au début après avoir joué jusqu'à la fin
indicator-dots : s'il faut afficher les points indicateurs du panneau
lecture automatique : s'il faut basculer automatiquement
intervalle : intervalle de commutation automatique
durée : durée de l'animation glissante
<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. Navigation
<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. Structure de la liste des produits
5. Cliquez sur la navigation pour passer à une autre page
données:
méthodes :
6. Encapsuler le composant liste de produits (réutilisation)
Sous-ensemble :
Valeur de passage du composant parent :
7. Mettre en œuvre le pull-up pour charger plus et le pull-down pour rafraîchir
(1) onReachBottom tirez vers le haut pour charger plus
(2) actualisation déroulante enablePullRefresh (configurez d'abord dans pages.json)
onPullDownRefresh
8. Passer un appel uni.makePhoneCall
9. Carte
<carte></carte>
10. Réaliser la barre de navigation de classement à gauche
(1) scroll-view est un composant de zone de vue déroulante. Attribut scroll-y : faire défiler verticalement
(2) Cliquez pour mettre en surbrillance (cliquez pour être une catégorie, le style est différent)
11. Classer les données à droite correspondant à la gauche
(1) Obtenir l'identifiant de la catégorie de clic (l'identifiant renvoyé par l'arrière-plan) : paramètres de requête
(2) Send request : le paramètre est l'id du clic
(3) Afficher le côté droit
(4) Affichage d'initialisation gauche
(5) Ne traitez aucune donnée
12. Aperçu des images
paramètres uni.previewImage actuels, urls
13. Aller à la page de détails (id)
14. Temps de traitement Filtre global
15.texte riche texte riche
(1)
(2) Trop-plein de la poignée
Styles globaux App.vue
16. Navigation en bas de la page de détails du produit (composant d'extension uni ui)
https://ext.dcloud.net.cn/plugin?id=865
Non affiché, raisons hiérarchiques.
La navigation inférieure affecte le rembourrage supérieur-bas
17. Petits programmes emballés et publiés
18.h5 emballage
19. Emballage Android