哈喽,大家好,今天要进入新篇章啦,商品详情页,这个可是个大模块,要分好几次才能讲解清楚,现在我们先进行第一讲,老规矩,先上效果图
有木有很酷炫啊,下面由代码君教你如何实现。
详情页布局
看效果图,可以知道详情页包含以下几个模块,banner、标题栏、选择购买栏、商品评价、商品详情、还有一个底部悬浮栏,这里比较难的是底部悬浮栏,剩下的我们之前模块我们之前就有布局过
1. detail.wxml
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"></image> <scroll-view scroll-y="true"> <text class="title">LANCOME兰蔻小黑瓶精华肌底液</text> <text class="price">¥500</text> <view class="separate"></view> <text bindtap="toggleDialog">请选择购买数量</text> <view class="separate"></view> <text class="text-remark">东西还可以,好评~</text> <view class="separate"></view> <block wx:for-items="{{detailImg}}" wx:key="name"> <image class="image_detail" src="{{item}}" /> <view class="temp"></view> <view class="detail-nav"> <image bindtap="toCar" src="../../images/detail/detail_btn_cart.png" /> <view class="line_nav"></view> <image bindtap="addLike" src="{{isLike?'../../images/detail/detail_btn_mark_selected.png':'../../images/detail/detail_btn_mark_normal.png'}}" /> <button class="button-green" bindtap="addCar" formType="submit">加入购物车</button> <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
这里面要讲解的有
- banner里面新加入一个东西bindtap=”previewImage”,图片预览功能,就是查看大图,至于事件是如何处理的,请查看detail.js 里的previewImage事件
- 底部悬浮栏里面的那个收藏按钮,我们要如何做用户点击一下就更换收藏图标呐,本文是通过isLike这个Boolean值来做判断的,用户每触发一次addLike事件,就更换一次Boolean值,按钮的更换效果就实现了
2. detail.wxss
background-color: gainsboro; background-color: gainsboro; background-color: #4caf50; /* Green */ background-color: #f44336; /* 红色 */ background-color: gainsboro;
css 样式属性
-
border-radius 设置边界圆角,设置的大小就是边角的弧度,该属性可以应该在按钮活图片上,由于加入购物车和立即购买是放在底部所以最好是直角,所以把border-radius设置为0 -
display inline-block值代表混合块和内联特性。 盒子的外部被视为内联元素。因此,不会为元素创建新行。 框的内部被视为块元素,并应用诸如宽度,高度和边距的属性。 -
align-items 设置了flex容器的对齐方式。一般设置为center居中 - z-index 属性指定一个元素的堆叠顺序。如果值设置为正数,越大这对应的view也会越在上面一层,负数就是在底层,当前页面z-index 为0,所以要底部导航栏要浮在上面就把z-index 设置大于0就好
3. detail.js
"http://mz.djmall./files/product/20161201/148057921620_middle.jpg", "http://mz.djmall./files/product/20161201/148057922659_middle.jpg", "http://mz.djmall./files/product/20161201/148057923813_middle.jpg", "http://mz.djmall./files/product/20161201/148057924965_middle.jpg", "http://mz.djmall./files/product/20161201/148057925958_middle.jpg" indicatorDots: true, //是否显示面板指示点 interval: 3000, //自动切换时间间隔,3s duration: 1000, // 滑动动画时长1s "http://7xnmrr.com1.z0.glb./detail_1.jpg", "http://7xnmrr.com1.z0.glb./detail_2.jpg", "http://7xnmrr.com1.z0.glb./detail_3.jpg", "http://7xnmrr.com1.z0.glb./detail_4.jpg", "http://7xnmrr.com1.z0.glb./detail_5.jpg", "http://7xnmrr.com1.z0.glb./detail_6.jpg", previewImage: function (e) { var current = e.target.dataset.src; current: current, // 当前显示图片的http链接 urls: this.data.imgUrls // 需要预览的图片http链接列表 isLike: !this.data.isLike
介绍几个系统API的接口
知识小课堂
- css样式的复用:@import “tab/tab.wxss”;
最近遇到一个问题,就是同一个页面有用到别的页面的样式,这时候最笨的方式是,把别的页面的样式拷贝过来,但是这样会导致代码冗余量太大,还有一个是写在app.wxss里面,这个大家都可以共用,但是这个也不太好就是,所有有用到复用的就全写在app.wxss,这样会导致该样式过于臃肿,不利于代码的阅读,这时候@import,就派上用场了,只需要在xxx.wxss页面加入@import “tab/tab.wxss”;这样你就可以引用tab.wxss里面类的属性了 - 几个界面跳转的区分
- wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面
- wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面
- wx.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
- wx.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面。
通过上面的解释,我们可以知道,我们底部悬浮栏中购物车的跳转应该用wx.switchTab,因为他是要跳转到购物车tab页面
总结
今天讲解的内容有点多,大家回去好好消化吧,反正我要说的是,详情页的知识点是个大头,丝毫不逊色与首页的内容,提前穿插一些知识点,方便下一节的深入讲解,好了,今天就到这,祝大家周末愉快~
|