11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

产品页面顶部切换功能

本节主要讲解产品详细页面中顶部切换界面和功能的实现，效果如图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/

11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）相关推荐

25-微信小程序商城联系客服（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
联系客服本节主要讲解会员功能中的联系客服界面的实现.效果如图15-11所示. 1.布局分析结构布局分析示意如图15-12所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <v ...
09-微信小程序商城分类和产品左右布局框架（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
本章主要讲解产品分类功能和产品详细页面的实现.主要涉及:如何实现左右布局的框架,如何实现产品页面顶部菜单的切换,产品的详情页面.底部菜单.评论页面的实现等. 左右布局框架左右布局框架效果如图13-1 ...
20-微信小程序商城下单页面的产品列表和留言（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
下单页面的产品列表和留言本节主要讲解下单页面中的产品列表和留言界面如何实现.效果如图14-9所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <view><!-第1 ...
15-微信小程序商城产品评价页布局（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
产品评价页布局本节主要讲解产品评价页的布局和实现,效果如图13-22所示. 1.布局分析结构布局分析示意如图13-23所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <vi ...
07-微信小程序商城精品推荐（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
精品推荐本节讲解精品推荐"区域标题"和"产品列表"的界面实现.效果如图12-15所示. 1.应用知识点分析应用知识点包括:  一行2列的布局使用.  本 ...
24-微信小程序商城收货地址列表（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
收货地址列表本节主要讲解收货地址列表界面的实现.效果如图15-5所示. 1.布局分析结构布局分析示意如图15-6所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <view ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
首先展示一下要显示的功能:` 首先需要在开发者工具中新建一个文件夹(components),分别在文件夹中新建.js .json .wxml .wxcss四个文件(可以右键文件夹,选择新建新建(com ...
python flask实战订餐系统微信小程序-54删除购物车以及下单页面跳转功能实现
B站配套视频教程观看动态计算价格 index.js ,totalPrice: function () {var list = this.data.list;var totalPrice = 0.00 ...
android仿抖音上下切换视频,微信小程序仿抖音视频之整屏上下切换功能的实现代码...
Page({ /** * 页面的初始数据 */ data: { video_list:[ {video_src:}, {video_src:}, {video_src:}, {video_src:}, ...

11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

产品页面顶部切换功能

1.布局分析

2.功能实现

11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）相关推荐

最新文章

热门文章

11-微信小程序商城 分类和产品 产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

产品页面顶部切换功能

1.布局分析

2.功能实现

11-微信小程序商城 分类和产品 产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）相关推荐

最新文章

热门文章

11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）相关推荐