随着微信app日渐成为人重要的生活工具,对的,生活工具!这样说一点也不过分,因为我们的日常生活已经依赖微信,包括日常的付款,社交,阅读,甚至购物。小程序应运而生也很快被大家所接受,因为小程序不用下载就可以使用,可是微信小程序有它自己的规范,我们可以去学习。可是很多时候,为了节省开发成本,最好就能只开发一个版本,然后编译成各种语言。感谢有vue.js 和 HBuilderX。今次利用HBuilderX和vue.js开发了一个天猫购物商城首页,供大家学习和参考。
先上效果图:
文章图片
开发天猫商城首页排版有两个重点,文件的引入和v-for的使用。
组件是视图层的基本组成单元,所以根节点为 < template> ,这个 < template> 下只能有一个根组件。我们整个天猫商城首页视图层都是在template标签完成。
现在来讲一下开发天猫商城首页的重点部分,之后再给项目代码。
【文件的引入】
Vue文件的引入需要使用import 关键词。
文章图片
天猫商城例子我是用到uni-app组件,文件导入之后需要使用映入使用import 关键词引入到vue文件的js中。
例如:
import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniIcon from "@/components/uni-icon/uni-icon.vue"
export default {
components: {uniIcon,uniGrid},
}
另外在项目里使用本地图片的时候,要引入图片到模版中。并且要给图片绑定变量。
例如:
Html部分:
<
image class="main-img" :src="http://www.srcmini.com/title.img" mode=""><
/image>
Js部分:
import img1 from "@/static/img-01.jpg"
import img2 from "@/static/img-02.jpg"
import img3 from "@/static/img-03.jpg"
import img4 from "@/static/img-04.jpg"export default {data() {
return {
titles:[
{text:'限时抢购',img:img1},
{text:'天猫好物',img:img2},
{text:'聚划算',img:img3},
{text:'天猫闪购',img:img4}
]
}
}
}
【v-for的使用】
因为在实际开发项目时,很多都是格式一样,数据不一样,就想这个天猫商城首页的商品部分,排版格式都是一样的,只是图片标题和价格不一样,这时候我们可以使用v-for来便利数据,只需要在html模版部分添加样式和数据绑定的属性就可以。
例如:
// 猜你喜欢
<
view class="goods-content">
<
view class="goods-item" v-for='item in goods'>
<
view class="img">
<
image :src="http://www.srcmini.com/item.img" mode=""><
/image>
<
/view>
<
view class="goods-title">
{{item.title}}
<
/view>
<
view class="footer">
<
view class="price">
{{item.price}}
<
/view>
<
view class="like">
看相似
<
/view>
<
/view>
<
/view>
<
/view>
在需要被遍历的元素的上一级,也就是父元素添加v-for属性,以便它的下一级都可以使用数组元素属性。
export default {
data() {
return {
goods:[
{title:'迪士尼宝宝儿童帽潮薄款公主太阳帽',price:'¥52',img:goods1},
{title:'龙虎 清凉油 3g/盒 药品满88元包邮',price:'¥88',img:goods2},
{title:'风运动中长款修身连衣裙夏两件套装',price:'¥63',img:goods3},
{title:'华为荣耀v10/v20背夹充电宝9轻薄',price:'¥98',img:goods4}
]
}
}
}
【使用vue+uni-app开发天猫商城案例】【附上项目的完整代码】
<
template>
<
view class="content" id="tmall">
<
!-- search -->
<
view class="uni-form-item uni-column header-search">
<
uni-icon class="search-icon" type="search" size="30"><
/uni-icon>
<
input class="uni-input header-input" confirm-type="search" placeholder="落地风扇" />
<
/view><
!-- menu -->
<
uni-grid :options="menu" column-num="5" show-border="false">
<
/uni-grid><
!-- swiper -->
<
view class="uni-padding-wrap">
<
view class="page-section swiper">
<
view class="page-section-spacing">
<
swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<
swiper-item>
<
view class="swiper-item">
<
image class='img-ad' src="http://www.srcmini.com//gw.alicdn.com/tps/i4/TB1ZgvOSxTpK1RjSZFMSuvG_VXa.jpg_790x10000Q75.jpg_.webp" mode=""><
/image>
<
/view>
<
/swiper-item>
<
swiper-item>
<
view class="swiper-item">
<
image class='img-ad' src="http://www.srcmini.com//gw.alicdn.com/tfs/TB1h3OGShjaK1RjSZFAXXbdLFXa-1035-390.jpg_790x10000Q75.jpg_.webp" mode=""><
/image>
<
/view>
<
/swiper-item>
<
swiper-item>
<
view class="swiper-item">
<
image class='img-ad' src="http://www.srcmini.com//gw.alicdn.com/imgextra/i2/26/O1CN01jrwKAz1C3woePAzH5_!!26-0-lubanu.jpg_790x10000Q75.jpg_.webp" mode=""><
/image>
<
/view>
<
/swiper-item>
<
/swiper>
<
/view>
<
/view>
<
/view><
!-- 优惠 -->
<
view class="main">
<
view class="main-item" v-for="title in titles">
<
view>
<
view class="title">{{title.text}}<
/view>
<
/view>
<
view>
<
image class="main-img" :src="http://www.srcmini.com/title.img" mode=""><
/image>
<
/view>
<
/view>
<
/view><
!-- 热销单品 -->
<
view class="hot">
<
view class="hot-item hot_A" v-for="item in hottitle">
<
view class="hot_title">
<
view>{{item.titlea}}<
/view>
<
view>{{item.titleb}}<
/view>
<
view>{{item.titlec}}<
/view>
<
/view>
<
image :src="http://www.srcmini.com/item.image" mode=""><
/image>
<
/view><
view class="hot-item" v-for="item in hots">
<
view class="hot_title">
<
view>{{item.titlea}}<
/view>
<
view>{{item.titleb}}<
/view>
<
view>{{item.titlec}}<
/view>
<
/view>
<
image class="hot-img" :src="http://www.srcmini.com/item.image" mode=""><
/image>
<
/view>
<
/view><
!-- 猜你喜欢 -->
<
view class="goods-content">
<
view class="goods-item" v-for='item in goods'>
<
view class="img">
<
image :src="http://www.srcmini.com/item.img" mode=""><
/image>
<
/view>
<
view class="goods-title">
{{item.title}}
<
/view>
<
view class="footer">
<
view class="price">
{{item.price}}
<
/view>
<
view class="like">
看相似
<
/view>
<
/view>
<
/view>
<
/view><
/view>
<
/template><
script>import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniIcon from "@/components/uni-icon/uni-icon.vue"import img1 from "@/static/img-01.jpg"
import img2 from "@/static/img-02.jpg"
import img3 from "@/static/img-03.jpg"
import img4 from "@/static/img-04.jpg"import goods1 from "@/static/goods-01.webp.jpg"
import goods2 from "@/static/goods-02.webp.jpg"
import goods3 from "@/static/goods-03.webp.jpg"
import goods4 from "@/static/goods-04.webp.jpg"export default {components: {uniIcon,uniGrid},
data() {
return {
goods:[
{title:'迪士尼宝宝儿童帽潮薄款公主太阳帽',price:'¥52',img:goods1},
{title:'龙虎 清凉油 3g/盒 药品满88元包邮',price:'¥88',img:goods2},
{title:'风运动中长款修身连衣裙夏两件套装',price:'¥63',img:goods3},
{title:'华为荣耀v10/v20背夹充电宝9轻薄',price:'¥98',img:goods4}
],titles:[
{text:'限时抢购',img:img1},
{text:'天猫好物',img:img2},
{text:'聚划算',img:img3},
{text:'天猫闪购',img:img4}
],hots:[
{titlea:'人气榜',titleb:'品质优雅单鞋榜',titlec:'月销量22万',image:img1},
{titlea:'人气榜',titleb:'潮流时尚卫衣榜',titlec:'月销量22万',image:img3},
{titlea:'人气榜',titleb:'品质优雅单鞋榜',titlec:'月销量22万',image:img4},
{titlea:'人气榜',titleb:'潮流时尚卫衣榜',titlec:'月销量22万',image:img1}],hottitle:[
{titlea:'人气榜',titleb:'潮流时尚卫衣榜',titlec:'月销量22万',image:img1},
],menu:[
{image:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',text:'圣诞树'},
{image:'//gw.alicdn.com/tfs/TB1wSoFa5qAXuNjy1XdXXaYcVXa-196-196.png?avatar=1_110x10000.jpg_.webp',text:'铃铛'},
{image:'//gw.alicdn.com/tfs/TB1Jc0fSFXXXXXTapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',text:'圣诞老人'},
{image:'//gw.alicdn.com/tfs/TB15lhOSFXXXXaKXpXXXXXXXXXX-147-147.png_110x10000.jpg_.webp',text:'礼物'},
{image:'//gw.alicdn.com/tfs/TB12CFXSFXXXXcpapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',text:'帽子'}
],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
}
},
onLoad() {
},
methods: {
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
}
}
}
<
/script><
style>
body{
background-color: #F1F1F1;
}.header-search{
background-color: rgb(255, 0, 54);
padding: 6px;
}.header-search .header-input{
padding: 6px;
background-color: #ffffff;
border-radius: 5px;
padding-left: 30px;
}.header-search .search-icon{
position: absolute;
color: #C8C7CC;
}.swiper{
height: 120px;
}.page-section.swiper{
padding: 0 10px;
}.img-ad{
height: 120px;
width: 100%;
}.main{
padding: 20px 10px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 8px;
grid-column-gap: 8px;
grid-auto-rows: 150px;
}.main-item{
border-radius: 5px;
overflow: hidden;
}.main-item .title{
font-size: 18px;
font-weight: 600;
padding-left: 10px;
padding-top: 10px;
position: absolute;
z-index: 99;
}.hot{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 80px;
grid-row-gap: 8px;
grid-column-gap: 8px;
padding: 0 10px;
}.hot .hot-item{
background-color: #C8C7CC;
overflow: hidden;
}.hot .hot-item .hot_title{
font-size: 12px;
position: absolute;
padding-top:20px;
padding-left:10px;
}.hot .hot-item >*{
width: 100%;
height: auto;
}.hot .hot_A{
grid-column-start: 1;
grid-column-end: 3;
}.goods-content{
padding: 20px 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 8px;
grid-column-gap: 8px;
}.goods-content .goods-item{
display: flex;
flex-direction: column;
background-color: #FFFFFF;
overflow: hidden;
}.goods-content .img{
padding: 10px;
overflow: hidden;
height: 120px;
}.goods-content .goods-item .goods-title{
padding: 10px;
font-size: 14px;
color: #333333;
}.goods-content .goods-item .footer{
padding: 10px;
display: flex;
justify-content: space-between;
}
.goods-content .goods-item .footer .price{
color: rgb(255, 0, 0);
font-weight: 600;
}.goods-content .goods-item .footer .like{
padding: 3px 5px;
border: 10px;
background-color: rgb(255, 230, 235);
color: rgb(255, 0, 0);
border-radius: 10px;
font-size: 14px;
}
<
/style>
推荐阅读
- JavaScript中如何通过键值快速查元素(Map和Set数据类型)
- C语言简明教程(十二)(数组和指针完整实例详解)
- 微信web开发者工具启动不了打不开——已解决
- layui.flow流加载图标和样式的修改案例
- uni-app vue框架组件添加使用及注意事项
- C语言简明教程(十一)(函数和指针)
- 游戏介绍 – XCOM(Chimera Squad)
- Xbox Series X和PS5发布标题缓解了一天一台游戏机购买的压力
- Xbox Head Phil Spencer重新致力于单人游戏,并获得更多工作室收购