产品页面顶部切换功能

本节主要讲解产品详细页面中顶部切换界面和功能的实现，效果如图13-9所示。

1.布局分析

结构布局分析示意如图13-10所示。

根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view>  <!—第1层-开始-->
<view>商品</view>    <!—第2层-->       
<view>详情</view>    <!—第2层-->  
<view>评论</view>    <!—第2层-->  
</view>  <!—第1层-结束-->

<swiper>
	<swiper-item>
	</swiper-item>
</swiper>
根据效果图分

析出框架的层级后，在每个层级的view加上样式，编码实现即可。

2.功能实现

.wxml文件代码示例如下：

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" 
data-current="0" bindtap="swichNav">
商品
</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" 
	data-current="1" bindtap="swichNav">
详情
</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" 
	data-current="2" bindtap="swichNav">
评论
</view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  <swiper-item>
    <view>我是商品内容</view>
  </swiper-item>
  <swiper-item>
    <view>我是详情内容</view>
  </swiper-item>
  <swiper-item>
    <view>我是评论内容</view>
  </swiper-item>
</swiper>

.wxss文件代码示例如下：

.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #777777;  
    text-align: center;  
    line-height: 80rpx;}  
.swiper-tab-list{  font-size: 30rpx;  
    display: inline-block;  
    width: 33%;  
    color: #777777;  
}  
.on{ 
color: #da7c0c;  
border-bottom: 5rpx solid #da7c0c;
}  
.swiper-box{ 
display: block; height: 100%; width: 100%; overflow: hidden; 
}  
.swiper-box view{  
    text-align: center;  
}

.js文件代码示例如下：

data: {
    /**  * 页面配置  */
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0,
},
onLoad: function (options) {
    var that = this;
    /* 获取系统信息 */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
},
  /**  * 滑动切换tab   */
bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
},
  /**  * 点击tab切换  */
swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
},

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/