微信小程序实战篇
哈喽,大家好,今天要进入新篇章啦,商品详情页,这个可是个大模块,要分好几次才能讲解清楚,现在我们先进行第一讲,老规矩,先上效果图
有木有很酷炫啊,下面由代码君教你如何实现。
##详情页布局
看效果图,可以知道详情页包含以下几个模块,banner、标题栏、选择购买栏、商品评价、商品详情、还有一个底部悬浮栏,这里比较难的是底部悬浮栏,剩下的我们之前模块我们之前就有布局过
####1. detail.wxml
<!-- banner --> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"></image> </swiper-item> </block> </swiper> <scroll-view scroll-y="true"> <view class="detail"> <text class="title">LANCOME兰蔻小黑瓶精华肌底液</text> <text class="price">¥500</text> </view> <view class="separate"></view> <!-- sku选择 --> <text bindtap="toggleDialog">请选择购买数量</text> <view class="separate"></view> <text>商品评价</text> <text class="text-remark">东西还可以,好评~</text> <view class="separate"></view> <text>商品详情</text> <block wx:for-items="{{detailImg}}" wx:key="name"> <image class="image_detail" src="{{item}}" /> </block> <view class="temp"></view> </scroll-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> </view>
这里面要讲解的有
banner里面新加入一个东西bindtap=“previewImage”,图片预览功能,就是查看大图,至于事件是如何处理的,请查看detail.js 里的previewImage事件
底部悬浮栏里面的那个收藏按钮,我们要如何做用户点击一下就更换收藏图标呐,本文是通过isLike这个Boolean值来做判断的,用户每触发一次addLike事件,就更换一次Boolean值,按钮的更换效果就实现了
####2. detail.wxss
page { display: flex; flex-direction: column; height: 100%; } /* 直接设置swiper属性 */ swiper { height: 500rpx; } swiper-item image { width: 100%; height: 100%; } .detail { display: flex; flex-direction: column; margin-top: 15rpx; margin-bottom: 0rpx; } .detail .title { font-size: 40rpx; margin: 10rpx; color: black; text-align: justify; } .detail .price { color: red; font-size: 40rpx; margin: 10rpx; } .line_flag { width: 80rpx; height: 1rpx; display: inline-block; margin: 20rpx auto; background-color: gainsboro; text-align: center; } .line { width: 100%; height: 2rpx; display: inline-block; margin: 20rpx 0rpx; background-color: gainsboro; text-align: center; } .detail-nav { display: flex; flex-direction: row; align-items: center; float: left; background-color: #fff; position: fixed; bottom: 0; right: 0; z-index: 1; width: 100%; height: 100rpx; } .button-green { background-color: #4caf50; /* Green */ } .button-red { background-color: #f44336; /* 红色 */ } .image_detail { width: 100%; } button { color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 30rpx; border-radius: 0rpx; width: 50%; height: 100%; line-height: 100rpx; } .detail-nav image { width: 70rpx; height: 50rpx; margin: 20rpx 40rpx; } .line_nav { width: 5rpx; height: 100%; background-color: gainsboro; } /* 占位 */ .temp { height: 100rpx; } text { display: block; height: 60rpx; line-height: 60rpx; font-size: 30rpx; margin: 10rpx; } .text-remark { display: block; font-size: 25rpx; margin: 10rpx; }
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
Page({ data: { isLike: true, // banner imgUrls: [ "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg", "http://mz.djmall.xmisp.cn/files/product/20161201/148057922659_middle.jpg", "http://mz.djmall.xmisp.cn/files/product/20161201/148057923813_middle.jpg", "http://mz.djmall.xmisp.cn/files/product/20161201/148057924965_middle.jpg", "http://mz.djmall.xmisp.cn/files/product/20161201/148057925958_middle.jpg" ], indicatorDots: true, //是否显示面板指示点 autoplay: true, //是否自动切换 interval: 3000, //自动切换时间间隔,3s duration: 1000, //滑动动画时长1s // 商品详情介绍 detailImg: [ "http://7xnmrr.com1.z0.glb.clouddn.com/detail_1.jpg", "http://7xnmrr.com1.z0.glb.clouddn.com/detail_2.jpg", "http://7xnmrr.com1.z0.glb.clouddn.com/detail_3.jpg", "http://7xnmrr.com1.z0.glb.clouddn.com/detail_4.jpg", "http://7xnmrr.com1.z0.glb.clouddn.com/detail_5.jpg", "http://7xnmrr.com1.z0.glb.clouddn.com/detail_6.jpg", ], }, //预览图片 previewImage: function (e) { var current = e.target.dataset.src; wx.previewImage({ current: current, // 当前显示图片的http链接 urls: this.data.imgUrls // 需要预览的图片http链接列表 }) }, // 收藏 addLike() { this.setData({ isLike: !this.data.isLike }); }, // 跳到购物车 toCar() { wx.switchTab({ url: /pages/cart/cart }) }, // 立即购买 immeBuy() { wx.showToast({ title: 购买成功, icon: success, duration: 2000 }); }, })
介绍几个系统API的接口
wx.previewImage 图片预览功能
current 传入当前图片路径
urls 图片数组urls
wx.showToast
Toast 吐司,做前端都知道,这个是一定会用到的,就是弹出半透明框,和用户进行交互,wx.showToast调用很简单,title 就是你要提示用户的内容,
icon,目前只支持"success"、"loading"两个属性,
image 自定义图片,如果设置了image图片就会顶替掉icon的图片
mask 是否显示透明蒙层,换句话说就是设置当Toast显示的时候,用户可不可以点击其他按钮,默认是不显示透明蒙层
wx.switchTab 跳转到购物车界面,详解请看下面的知识小课堂
##知识小课堂
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页面