当前位置:网站首页>[small program project development -- Jingdong Mall] the home page commodity floor of uni app
[small program project development -- Jingdong Mall] the home page commodity floor of uni app
2022-07-01 02:52:00 【Computer magician】
Welcome to
Magic house !!The article contains columns
-- 2022 Wechat applet Jingdong Mall actual battle --Column content ( Before using the following articles strong Suggest Eat the article first )
-- uni-app Project structures, --
-- Jingdong Mall uni-app To configure tabBar & Window style --
-- Jingdong Mall uni-app Developed subcontracting configuration --
-- Jingdong Mall uni-app Developed rotation chart --
-- Jingdong Mall uni-app The classified navigation area --
List of articles
One 、 design sketch :
Two 、 Data acquisition :
- Data interface style 【 Divided into the title ( Including pictures , written words ), list ( Picture text )】
{
"message": [
{
"floor_title": {
"name": " Women's fashion ",
"image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_title.png"
},
"product_list": [
{
"name": " High quality clothing ",
"image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
"image_width": "232",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query= dress "
},
{
"name": " It's hot in spring ",
"image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query= heat "
},
{
"name": " Clearing the warehouse with hot money ",
"image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query= Hot style "
},
{
"name": " pollen ",
"image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query= In the spring "
},
{
"name": " heartache ",
"image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query= cardiac "
}
]
},
"meta": {
"msg": " To be successful ", "status": 200 }
}
- Definition data data
data() {
return {
// Floor data array
floorList: []
};
- method Define the data retrieval method
// Get floor navigation data
async getfloorList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
// If the call fails Display the error prompt
if (res.meta.status != 200) return uni.$showMsg()
this.floorList = res.message
},
- onload Call function
3、 ... and 、UI Interface rendering
- Render page images in the dynamic loop data list , have access to vue grammar v-bind:, Dynamic binding , Also support mustache grammar , But it is only limited to some output such as text mustache grammar Such as output title text , Attributes in components are still not supported mustache The grammatical
And the style of the obtained picture is dynamic
style
in need Followed by{}
Represents dynamic rendering
<!-- Floor area -->
<!-- Floor container -->
<view class="">
<!-- floor item -->
<view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">
<!-- Floor title -->
<view class="floor_title">
<image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>
<!-- <text>{
{
item.floor_title.name}}</text> -->
</view>
<!-- Floor list -->
<view class="floor_product">
<!-- Large picture on the left -->
<view class="left-img-box">
<!-- Splicing Incomplete unit px -->
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">
</image>
</view>
<!-- List of pictures on the right -->
<view class="right-img-box">
<!-- The judgment index is 0 What happened -->
<view class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0">
<image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">
</view>
</image>
</view>
</view>
</view>
</view>
// notes : style
.floor_title {
display: flex;
flex-direction: column;
}
.floor_title image {
height: 60rpx;
width: 100%;
}
.floor_product {
display: flex;
padding: 10rpx;
}
.right-img-box {
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
In the setting style Wrap style is
flex-wrap: wrap;
They can't be used
white-space: normal
This is because display:flex Will be with white-space: normal Cause style conflicts , It's not going to work
design sketch :
Four 、 Go to the product page
- Create product page , Because this page is not a user Loading applet Mainly initialized objects , Put it on to subcontract in .
4.1、 Processing interface URL Address
- In practice, the interface gives URL The address does not match your own named page , And Corresponding page parameters are required , You need to operate it
Because data retrieval and page rendering are synchronized , So here we deal with URl Links use forEach
loop
He and for The difference lies in (for&forEach The article explain & Arrow function )
- for Index the corresponding data by subscript ,forEach yes JavaScript Function method of defined array adopt JavaScript The underlying program Loop through the data elements of the array , The principle is that the pointer points to , So in the face of millions of data sets ,for May get stuck ,forEach A few milliseconds .
- for Can pass break interrupt , forEach Can not be
- forEach Is a function method of an array , You cannot assign or modify variables
The biggest difference between the two
- forEach It's a function Can pass Set parameters Come on Store index subscript data values , This is more convenient in operation
- for Loop execution Can only be generated through a loop Index subscript The number Then by index subscript operation Data elements of an array
- Implementation code
methods: {
// Get floor navigation data
async getfloorList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
// If the call fails Display the error prompt
if (res.meta.status != 200) return uni.$showMsg()
// double forEach Cyclic modification URL
res.message.forEach(floor => {
floor.product_list.forEach(prd => {
prd.navigator_url = '/subpackages/goods_list/goods_list?' + prd.navigator_url.split('?')[1] // Cut to list Take the following page parameters
})
})
this.floorList = res.message
},
Successfully modified
5、 ... and 、 Configure page components navigator Jump to the page
- To the corresponding On the product page
view
Change it tonavigator
Components
<!-- Floor area -->
<!-- Floor container -->
<view class="">
<!-- floor item -->
<view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">
<!-- Floor title -->
<view class="floor_title">
<image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>
<!-- <text>{
{
item.floor_title.name}}</text> -->
</view>
<!-- Floor item list -->
<view class="floor_product">
<!-- Large picture on the left -->
<navigator class="left-img-box" :url="item.product_list[0].navigator_url">
<!-- Splicing Incomplete unit px -->
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">
</navigator>
<!-- List of pictures on the right -->
<view class="right-img-box">
<!-- The judgment index is 0 What happened -->
<navigator class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0" :url="product.navigator_url">
<image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">
</navigator>
</image>
</view>
</view>
</view>
</view>
Accept page parameters , And render as window title
stay goods_list.vue In file
export default {
data() {
return {
title:'' // Defining parameters
};
},
onLoad(options){
this.title = options // Receive parameters and assign values
},
onReady(){
uni.setNavigationBarTitle({
title: this.title.query // When programming Set the style
})
}
effect :
6、 ... and 、 Branch merge and commit ( the selected readings *)
- Will local home Branch into master Branch
- Push the code to the remote warehouse
- Delete the branch
operation
- git branch notes : View current branch
- git status notes : View the current file status
- git add . notes : Add all files to staging area
- git commit -m “ Completed the development of homepage function ” notes : Submit to the local repository
- git push -u origin home notes : -u It's configuration upstream, Submit the branch from local warehouse to remote warehouse home preservation , The default host is determined
- git checkout master notes : Switch branches to master
- git merge home notes : Merging branches
- giit push notes : Because of the front -u Set up upstearm So this time, the default submission is master Branch ( No other parameters are required )
- git branch -d home notes : Delete local home Branch
Thanks for reading , Your praise and collection are the biggest motivation for me to create !
边栏推荐
- Pychar open remote directory remote host
- Mouse over effect VI
- js防抖和节流
- Dart training and sphygmomanometer inflation pump power control DPC
- [wechat applet development] style summary
- LeetCode_ Stack_ Difficulties_ 227. basic calculator (excluding multiplication and division)
- Contrastive learning of Class-agnostic Activation Map for Weakly Supervised Object Localization and
- 旷世轻量化网络ShuffulNetV2学习笔记
- 园区运营效率提升,小程序容器技术加速应用平台化管理
- Viewing JVM parameters
猜你喜欢
Restcloud ETl数据通过时间戳实现增量数据同步
基于Pytorch完整的训练一个神经网络并进行验证
旷世轻量化网络ShuffulNetV2学习笔记
Desai wisdom number - other charts (parallel coordinate chart): employment of fresh majors in 2021
【小程序项目开发--京东商城】uni-app之自定义搜索组件(上)
servlet【初识】
Evaluation of the entry-level models of 5 mainstream smart speakers: apple, Xiaomi, Huawei, tmall, Xiaodu, who is better?
视觉特效,图片转成漫画功能
How to use Jieba participle in unity
Focusing on green and low carbon, data center cooling has entered a new era of "intelligent cooling"
随机推荐
PTA 1017
详解数据治理知识体系
Here comes the share creators budding talent training program!
Share Creators萌芽人才培养计划来了!
Lenovo x86 server restart management controller (xclarity controller) or TSM method
lavaweb【初识后续问题的解决】
鼠标悬停效果十
UE4渲染管线学习笔记
鼠标悬停效果二
import tensorflow. contrib. Slim as slim error
基于Pytorch完整的训练一个神经网络并进行验证
Densenet network paper learning notes
The operation efficiency of the park is improved, and the application platform management of applet container technology is accelerated
Is it safe to open a stock account? Shanghai stock account opening procedures.
Evaluation of the entry-level models of 5 mainstream smart speakers: apple, Xiaomi, Huawei, tmall, Xiaodu, who is better?
单片机 MCU 固件打包脚本软件
【小程序项目开发-- 京东商城】uni-app之首页商品楼层
Restcloud ETL data realizes incremental data synchronization through timestamp
Lavaweb [first understanding the solution of subsequent problems]
Voici le programme de formation des talents de SHARE Creators!