产品页面顶部切换功能
本节主要讲解产品详细页面中顶部切换界面和功能的实现，效果如图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）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
11-微信小程序商城 分类和产品 产品页面顶部切换功能（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
