微信小程序实战篇-电商（二）

来源：互联网发布：阿里孙正义马云占股份编辑：程序博客网时间：2024/06/07 01:35

哈喽，大家好，今天总于挤出时间，写第二篇啦，自从决定写文章才发现时间都不够用啊，废话不多说，我们直接进入正题吧！
先回顾一下上篇文章，我们讲解了底部导航栏和顶部导航栏的制作，大家应该都记得把，基本上电商小程序都会带底部当导航栏，所以底部导航栏一定要会哦~，今天呐，我将教大家另一个必须会的，banner 图的制作，也叫广告轮播图，就是我们经常看到首页自动轮播的那个控件。

广告轮播图的制作

先上效果让大家过过瘾，是不是很眼熟，别急，看完这篇文章，你也可以轻松制作出这样的效果。

广告轮播图.gif

我还是把广告轮播图写在 home 的页面里了，需要改动的页面有home.js、home.wxml、home.wxss

home.wxml

  <!-- banner -->  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">    <block wx:for="{{imgUrls}}">      <swiper-item>        <image src="{{item}}" />      </swiper-item>    </block>  </swiper>

swiper 是微信自带的视图，我们直接使用就好，记住里面一定要包含，你用自定义的 view 是无效的，下面介绍一下这个控件的常用属性

indicator-dots 是否显示面板指示点
autoplay 是否自动切换
interval 自动切换时间间隔
duration 滑动动画时长

剩下的 wx:for，已经可以算老生常谈了，几乎每篇都会遇到，所以就一带而过不讲了，不懂的自己查询前面几篇文章，

home.wxss

/* 直接设置swiper属性 */swiper {  height: 300rpx;}swiper-item image {  width: 100%;  height: 100%;}

home.js

// banner    imgUrls: [      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161219\/148211980641.png',      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/148238831285.png',      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/14823895573.png'    ],    indicatorDots: true, //是否显示面板指示点    autoplay: true, //是否自动切换    interval: 3000, //自动切换时间间隔,3s    duration: 1000, //  滑动动画时长1s

home.js 就是数据了，imgUrls、indicatorDots、autoplay、interval、duration这些个字段在 home.wxml 都有用到，不明白的看注释，已经写的很清楚了

界面布局

剩下的布局都是css的基础啦，我就放在这里统一讲，先上效果图

效果图.png

我们接下来要做的布局就是广告轮播图下面的品牌馆模块布局、以及新品上架这个模块的布局

home.wxml

  <!-- 分类导航 -->  <view class="navs">    <block wx:for-items="{{navItems}}" wx:key="name">      <view class="nav-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">        <image src="{{item.imageurl}}" class="nav-image" />        <text>{{item.name}}</text>      </view>    </block>  </view>  <view class="separate"></view>  <view class="cate-container">    <view class="category-title">      <text class="name">新品上架</text>      <view class="line_flag"></view>      <image class="head-img" src="{{newgoods_head_url}}"></image>    </view>    <scroll-view scroll-x="true">      <view class="goods">        <block wx:for-items="{{goodsItems}}" wx:key="name">          <view class="goods-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">            <image src="{{item.imageurl}}" class="goods-image" />            <text>{{item.name}}</text>            <p>{{item.newprice}}</p>          </view>        </block>      </view>    </scroll-view>  </view>

代码图片.png

其实代码已经有注释了，我用带有颜色的框区分，是为了读者更好的理解，第一个红框是 banner，这个上面讲过了，跳过，第二个红框分类导航，view 层包含一个 for 循环的 block 模块，每个模块里有一个 image 控件和 text 控件，对比效果图，对应的就是品牌馆、类目等数据，这里我再从新教一遍如何看懂这些代码，拿分类导航来说

第一行这么写，class字段意思是给这个view定义了名叫 navs 的样式，那navs样式在哪里呐，在对应名下的.wxss 样式里，所以我们要去 home.wxss 去找navs ，
data-xxx，xxx就是你给home.js里提供的数据关键词，home.js通过获取xxx关键词来获取xxx里面的数据，回调数据的时候会用的到
image src src很容易理解了，是填图片路径，要求这个图片路径要正确，就是必须可以读取的到，不然会报异常

回顾到此结束，接着看最后一个红框，红框中的第二个绿框，新控件
scroll-view 看单纯就知道他的作用，滚动的视图嘛，就是scroll-view里面包含了很多view 当超过屏幕的时候，你可以滚动查看被遮盖的view ，看一下scroll-view的属性

scroll-x 允许横向滚动
scroll-y 允许纵向滚动
scroll-top 设置竖向滚动条位置
scroll-left 设置横向滚动条位置
bindscrolltoupper 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower 滚动到底部/右边，会触发 scrolltolower 事件
enable-back-to-top iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
scroll-with-animation 在设置滚动条位置时使用动画过渡

我实现的是横向滚动，所以把scroll-x设置为true就好，大家可以试一下其他属性，多试试，看效果才能理解每个属性的效果

home.wxss

/*=================品牌馆、类目 的样式====================*/.navs {  display: flex;}.nav-item {  width: 25%;  display: flex;  align-items: center;  flex-direction: column;  padding: 20rpx;}.nav-item .nav-image {  width: 80rpx;  height: 80rpx;  /*border-radius: 50%;设置边界圆角*/}.nav-item text {  padding-top: 20rpx;  font-size: 25rpx;}/*=================新品上架 样式====================*/.category-title {  display: flex;  flex-direction: column;  margin-top: 15rpx;  margin-bottom: 0rpx;}.category-title .name {  font-size: 40rpx;  text-align: center;  margin: 10rpx auto;}.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;}image.head-img {  width: 100%;  height: 270rpx;}text {  color: #444;  font-size: 40rpx;}p{  color: red;  font-size: 30rpx;  margin-top: 20rpx;}.cate-container {  color: #fff;}/* 分割线 */.separate {  height: 15rpx;  background-color: #f2f2f2;}

刚刚我们在 home.wxml 中提到的navs、nav-item都在这里，display、flex-directio等对应的样式在微信小程序入门篇（二）wxss样式积累模块里都有记录，不明白属性作用的可以跳过去查阅一下，这个是基本功，不是什么技巧，只能死记硬背。

home.js

data: {    navbar: ['护肤', '彩妆', '香水', '个人护理'],    currentTab: 0,    // banner    imgUrls: [      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161219\/148211980641.png',      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/148238831285.png',      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/14823895573.png'    ],    indicatorDots: true, //是否显示面板指示点    autoplay: true, //是否自动切换    interval: 3000, //自动切换时间间隔,3s    duration: 1000, //  滑动动画时长1s    hot_products:    [      {        product_id: 1,        imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161222/148237182618.png',        html: "http://mz.djmall.xmisp.cn/files/activity/20161216/5853a0137573e84/mz2_ajax/index.html"      },      {        product_id: 2,        imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161202/148066038440.png',        html: "http://mz.djmall.xmisp.cn/files/activity/20161208/584926f0017d874/mz1/index.html"      }    ],    // navItems    navItems: [      {        typeId: 0,        name: '品牌馆',        url: 'bill',        imageurl: '../../images/navItems/home_icon_brand.png',      },      {        typeId: 1,        name: '类目',        url: 'bill',        imageurl: '../../images/navItems/home_icon_sort.png',      },      {        typeId: 2,        name: '特惠专场',        url: 'bill',        imageurl: '../../images/navItems/home_icon_gift.png'      },      {        typeId: 3,        name: '推荐好友',        url: 'bill',        imageurl: '../../images/navItems/home_icon_frends.png'      }    ],    // 新品上架    goodsItems: [      {        goodId: 0,        name: '兰蔻小黑瓶',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057921620.jpg',        newprice: "￥200.00",        oldprice: "￥300.00",      },      {        goodId: 1,        name: '兰蔻清莹柔肤爽肤水',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',        newprice: "￥120.00",        oldprice: "￥200.00",      },      {        goodId: 2,        name: '倩碧水嫩保湿精华面霜',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',        newprice: "￥320.00",        oldprice: "￥400.00",      },      {        goodId: 3,        name: '特效润肤露',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',        newprice: "￥30.00",        oldprice: "￥80.00",      },      {        goodId: 4,        name: '倩碧焕妍活力精华露',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',        newprice: "￥30.00",        oldprice: "￥80.00",      }, {        goodId: 5,        name: '日本资生堂洗颜',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg',        newprice: "￥30.00",        oldprice: "￥80.00",      }    ],    newgoods_head_url:"http://mz.djmall.xmisp.cn/files/banner/20161202/148066062976.jpg",    // 新品上架    recommends: [      {        goodId: 7,        name: 'OLAY玉兰油精油沐浴露玫瑰滋养二合一450ml',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',        newprice: "￥36.60",        oldprice: "￥40.00",      },      {        goodId: 10,        name: '兰蔻玫瑰清滢保湿柔肤水嫩肤水化妆水400ml补水保湿温和不刺激',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',        newprice: "￥30.00",        oldprice: "￥80.00",      }, {        goodId: 11,        name: 'Lancome/兰蔻清莹柔肤爽肤水/粉水400ml补水保湿玫瑰水化妆水',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',        newprice: "￥30.00",        oldprice: "￥80.00",      },      {        goodId: 12,        name: '美国CLINIQUE倩碧黄油无油/特效润肤露125ml',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',        newprice: "￥239.00",        oldprice: "￥320.00",      },      {        goodId: 13,        name: '法国LANCOME兰蔻柔皙轻透隔离防晒乳霜50ML2017年3月到期',        url: 'bill',        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',        newprice: "￥130.00",        oldprice: "￥180.00",      },    ],  }

home.js 已经多次强调这个是用来放数据和处理事件监听的，事件监听先跳过，后面会专门出一篇来讲解，数据目前也是模拟的数据，还没有涉及到网络请求，我要强调的是，所有的模拟数据一定要放在page下面的data里，代码君就犯过错，写在data括号的外边，程序就一直报错，招了好半天，才发现是这么低级的错误，所以我踩过的坑已经提醒你们了，不要继续掉坑里哦~

总结

好了，如果你照着我的代码敲的话，应该可以实现这些布局效果，代码君想告诉大家的是，一定要动手实践，只有实践你才会发现你哪里是真的理解了，哪里不会，相信我，实践后你会对程序的理解更透彻。好了，今天就讲解到这里，住大家周末愉快，最后放一张这几天我带领大家实现的代码效果图。

微信商城.gif

关注微信公众号获取最新咨询

代码集中营.jpg

阅读全文

1 0