(14条消息) 微信小程序实战篇

哈喽，大家好，今天要进入新篇章啦，商品详情页，这个可是个大模块，要分好几次才能讲解清楚，现在我们先进行第一讲，老规矩，先上效果图

有木有很酷炫啊，下面由代码君教你如何实现。

详情页布局

看效果图，可以知道详情页包含以下几个模块，banner、标题栏、选择购买栏、商品评价、商品详情、还有一个底部悬浮栏，这里比较难的是底部悬浮栏，剩下的我们之前模块我们之前就有布局过

1. detail.wxml

  1. <!-- banner -->
  2. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  3. <block wx:for="{{imgUrls}}">
  4. <swiper-item>
  5. <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"></image>
  6. </swiper-item>
  7. </block>
  8. </swiper>
  9. <scroll-view scroll-y="true">
  10. <view class="detail">
  11. <text class="title">LANCOME兰蔻小黑瓶精华肌底液</text>
  12. <text class="price">￥500</text>
  13. </view>
  14. <view class="separate"></view>
  15. <!-- sku选择 -->
  16. <text bindtap="toggleDialog">请选择购买数量</text>
  17. <view class="separate"></view>
  18. <text>商品评价</text>
  19. <text class="text-remark">东西还可以，好评~</text>
  20. <view class="separate"></view>
  21. <text>商品详情</text>
  22. <block wx:for-items="{{detailImg}}" wx:key="name">
  23. <image class="image_detail" src="{{item}}" />
  24. </block>
  25. <view class="temp"></view>
  26. </scroll-view>
  27. <!-- 底部悬浮栏 -->
  28. <view class="detail-nav">
  29. <image bindtap="toCar" src="../../images/detail/detail_btn_cart.png" />
  30. <view class="line_nav"></view>
  31. <image bindtap="addLike" src="{{isLike?'../../images/detail/detail_btn_mark_selected.png':'../../images/detail/detail_btn_mark_normal.png'}}" />
  32. <button class="button-green" bindtap="addCar" formType="submit">加入购物车</button>
  33. <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
  34. </view>

这里面要讲解的有

  • banner里面新加入一个东西bindtap=”previewImage”，图片预览功能，就是查看大图，至于事件是如何处理的，请查看detail.js 里的previewImage事件
  • 底部悬浮栏里面的那个收藏按钮，我们要如何做用户点击一下就更换收藏图标呐，本文是通过isLike这个Boolean值来做判断的，用户每触发一次addLike事件，就更换一次Boolean值，按钮的更换效果就实现了

2. detail.wxss

  1. page {
  2. display: flex;
  3. flex-direction: column;
  4. height: 100%;
  5. }
  6. /* 直接设置swiper属性 */
  7. swiper {
  8. height: 500rpx;
  9. }
  10. swiper-item image {
  11. width: 100%;
  12. height: 100%;
  13. }
  14. .detail {
  15. display: flex;
  16. flex-direction: column;
  17. margin-top: 15rpx;
  18. margin-bottom: 0rpx;
  19. }
  20. .detail .title {
  21. font-size: 40rpx;
  22. margin: 10rpx;
  23. color: black;
  24. text-align: justify;
  25. }
  26. .detail .price {
  27. color: red;
  28. font-size: 40rpx;
  29. margin: 10rpx;
  30. }
  31. .line_flag {
  32. width: 80rpx;
  33. height: 1rpx;
  34. display: inline-block;
  35. margin: 20rpx auto;
  36. background-color: gainsboro;
  37. text-align: center;
  38. }
  39. .line {
  40. width: 100%;
  41. height: 2rpx;
  42. display: inline-block;
  43. margin: 20rpx 0rpx;
  44. background-color: gainsboro;
  45. text-align: center;
  46. }
  47. .detail-nav {
  48. display: flex;
  49. flex-direction: row;
  50. align-items: center;
  51. float: left;
  52. background-color: #fff;
  53. position: fixed;
  54. bottom: 0;
  55. right: 0;
  56. z-index: 1;
  57. width: 100%;
  58. height: 100rpx;
  59. }
  60. .button-green {
  61. background-color: #4caf50; /* Green */
  62. }
  63. .button-red {
  64. background-color: #f44336; /* 红色 */
  65. }
  66. .image_detail {
  67. width: 100%;
  68. }
  69. button {
  70. color: white;
  71. text-align: center;
  72. text-decoration: none;
  73. display: inline-block;
  74. font-size: 30rpx;
  75. border-radius: 0rpx;
  76. width: 50%;
  77. height: 100%;
  78. line-height: 100rpx;
  79. }
  80. .detail-nav image {
  81. width: 70rpx;
  82. height: 50rpx;
  83. margin: 20rpx 40rpx;
  84. }
  85. .line_nav {
  86. width: 5rpx;
  87. height: 100%;
  88. background-color: gainsboro;
  89. }
  90. /* 占位 */
  91. .temp {
  92. height: 100rpx;
  93. }
  94. text {
  95. display: block;
  96. height: 60rpx;
  97. line-height: 60rpx;
  98. font-size: 30rpx;
  99. margin: 10rpx;
  100. }
  101. .text-remark {
  102. display: block;
  103. font-size: 25rpx;
  104. margin: 10rpx;
  105. }

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

  1. Page({
  2. data: {
  3. isLike: true,
  4. // banner
  5. imgUrls: [
  6. "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
  7. "http://mz.djmall.xmisp.cn/files/product/20161201/148057922659_middle.jpg",
  8. "http://mz.djmall.xmisp.cn/files/product/20161201/148057923813_middle.jpg",
  9. "http://mz.djmall.xmisp.cn/files/product/20161201/148057924965_middle.jpg",
  10. "http://mz.djmall.xmisp.cn/files/product/20161201/148057925958_middle.jpg"
  11. ],
  12. indicatorDots: true, //是否显示面板指示点
  13. autoplay: true, //是否自动切换
  14. interval: 3000, //自动切换时间间隔,3s
  15. duration: 1000, // 滑动动画时长1s
  16. // 商品详情介绍
  17. detailImg: [
  18. "http://7xnmrr.com1.z0.glb.clouddn.com/detail_1.jpg",
  19. "http://7xnmrr.com1.z0.glb.clouddn.com/detail_2.jpg",
  20. "http://7xnmrr.com1.z0.glb.clouddn.com/detail_3.jpg",
  21. "http://7xnmrr.com1.z0.glb.clouddn.com/detail_4.jpg",
  22. "http://7xnmrr.com1.z0.glb.clouddn.com/detail_5.jpg",
  23. "http://7xnmrr.com1.z0.glb.clouddn.com/detail_6.jpg",
  24. ],
  25. },
  26. //预览图片
  27. previewImage: function (e) {
  28. var current = e.target.dataset.src;
  29. wx.previewImage({
  30. current: current, // 当前显示图片的http链接
  31. urls: this.data.imgUrls // 需要预览的图片http链接列表
  32. })
  33. },
  34. // 收藏
  35. addLike() {
  36. this.setData({
  37. isLike: !this.data.isLike
  38. });
  39. },
  40. // 跳到购物车
  41. toCar() {
  42. wx.switchTab({
  43. url: '/pages/cart/cart'
  44. })
  45. },
  46. // 立即购买
  47. immeBuy() {
  48. wx.showToast({
  49. title: '购买成功',
  50. icon: 'success',
  51. duration: 2000
  52. });
  53. },
  54. })

介绍几个系统API的接口

  • wx.previewImage 图片预览功能

    • current 传入当前图片路径
    • urls 图片数组urls

  • wx.showToast
    Toast 吐司，做前端都知道，这个是一定会用到的，就是弹出半透明框，和用户进行交互，wx.showToast调用很简单，

    • title 就是你要提示用户的内容，
    • icon，目前只支持”success”、”loading”两个属性，
    • image 自定义图片,如果设置了image图片就会顶替掉icon的图片
    • mask 是否显示透明蒙层，换句话说就是设置当Toast显示的时候，用户可不可以点击其他按钮，默认是不显示透明蒙层

  • wx.switchTab 跳转到购物车界面，详解请看下面的知识小课堂

知识小课堂

  1. css样式的复用：@import “tab/tab.wxss”;
    最近遇到一个问题，就是同一个页面有用到别的页面的样式，这时候最笨的方式是，把别的页面的样式拷贝过来，但是这样会导致代码冗余量太大，还有一个是写在app.wxss里面，这个大家都可以共用，但是这个也不太好就是，所有有用到复用的就全写在app.wxss,这样会导致该样式过于臃肿，不利于代码的阅读，这时候@import，就派上用场了，只需要在xxx.wxss页面加入@import “tab/tab.wxss”;这样你就可以引用tab.wxss里面类的属性了
  2. 几个界面跳转的区分
    • wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面
    • wx.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面
    • wx.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    • wx.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。
      通过上面的解释，我们可以知道，我们底部悬浮栏中购物车的跳转应该用wx.switchTab，因为他是要跳转到购物车tab页面

总结

今天讲解的内容有点多，大家回去好好消化吧，反正我要说的是，详情页的知识点是个大头，丝毫不逊色与首页的内容，提前穿插一些知识点，方便下一节的深入讲解，好了，今天就到这，祝大家周末愉快~


赞 (0)

相关推荐

  • 微信小程序实现滑动翻页效果(完整代码)

    这篇文章主要介绍了微信小程序实现滑动翻页效果,本文通过效果图展示实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 微信小程序实现滑动翻页效果,效果图如下所示: 源码: <vi ...

  • (14条消息) 微信小程序入门学习，借助云开发动态更换swiper图片数据，小程序轮播图动态更新

    其实思路很简单 1,小程序里定义swiper组件 2,动态请求swiper要显示的图片资源 3,把图片资源组装成数组,并把数据绑定到swiper轮播图组件里. 我们这里的数据获取,可以自己服务器后台配 ...

  • (14条消息) 微信小程序

    前提: 类似一个商城界面,从云数据库拉取信息展示,用户点击某一个商品后,实现从数据库查询该商品的id,实现跳转. 商城界面展示 (mall) 详情界面展示 (re-datail) 数据库: 基本思路: ...

  • (14条消息) 微信小程序如何实现列表数据的详情页功能

    <!--pages/detail/detail.wxml--> <view class="detailContainer"> <image class ...

  • (1条消息) 微信小程序云开发CMS中WebHook功能的使用方法

    微信小程序云开发CMS中WebHook功能的使用方法 官方文档 Webhook 是什么呢,翻译过来就是网页钩子.它的用处是,当我们在CMS进行增添查改的操作后,会自动回调webhook函数,我们就可以 ...

  • (1条消息) 微信小程序云开发实践

    概述 : 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发 ...

  • (1条消息) 微信小程序

    微信小程序–云开发静态网站h5跳小程序 静态网站h5跳小程序 ----首先需要开通小程序的静态网站功能 1.开通静态网站.绑定自定义域名,需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里 ...

  • 微信小程序实战篇

    哈喽,大家好,今天要进入新篇章啦,商品详情页,这个可是个大模块,要分好几次才能讲解清楚,现在我们先进行第一讲,老规矩,先上效果图 有木有很酷炫啊,下面由代码君教你如何实现. ##详情页布局 看效果图, ...

  • 微信小程序css篇

    d,e,开头的css属性在小程序里比较少,就放在一起了,先看图: 那先说c开头的属性: 1.caption-side:这个是表格的标题所处的位置属性.取值:bottom ,top. 小程序里没有tab ...

  • (14条消息) 【系】微信小程序云开发实战坚果商城

    第 2-6 课:前端之商品详情实现 目录 开篇 [系]微信小程序云开发实战坚果商城-开篇 基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [ ...