1.ページ.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: 自動的に切り替えるかどうか
間隔:自動切り替え間隔
継続時間: スライドアニメーションの継続時間
<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. ナビゲーションをクリックして別のページに移動します
データ:
メソッド:
6. 製品リストコンポーネントのカプセル化 (再利用)
サブアセンブリ:
親コンポーネントのパス値:
7. さらにロードするにはプルアップを実装し、リフレッシュするにはプルダウンを実装します。
(1) onReachBottom をプルアップしてさらにロードします
(2)enablePullRefresh プルダウン更新(最初にpages.jsonで設定)
onプルダウンリフレッシュ
8. 電話をかける uni.makePhoneCall
9. 地図
<マップ></マップ>
10. 左側の分類ナビゲーション バーを実現します。
(1) スクロールビューは、スクロール可能なビューエリアコンポーネントです。属性scroll-y: 垂直方向にスクロールします。
(2) クリックしてハイライトします (クリックするとカテゴリになります。スタイルは異なります)
11. 左に対応する右のデータを分類する
(1) クリックカテゴリのID(バックグラウンドから返されるID)を取得:リクエストパラメータ
(2) リクエストの送信: パラメーターはクリックの ID です
(3) 右側を表示する
(4) 左初期化表示
(5) データなしの処理
12. 画像プレビュー
uni.previewImage パラメータの現在の、URL
13.詳細ページへジャンプ(id)
14. 処理時間 グローバルフィルター
15.リッチテキストリッチテキスト
(1)
(2) ハンドルオーバーフロー
App.vue グローバル スタイル
16. 製品詳細ページ下部ナビゲーション (拡張コンポーネント uni ui)
https://ext.dcloud.net.cn/plugin?id=865
階層的な理由により表示されません。
下部のナビゲーションは上部のパディングと下部に影響します
17. 小さなプログラムをパッケージ化してリリースする
18.h5 パッケージング
19. Androidのパッケージ化