php商业商城开发教程 14

发布时间：2022-09-16 12:40:15 所属栏目：PHP教程来源：

导读：　　产品详情页布局

　　本节主要讲解产品页面详情页面的布局实现，效果如图13-20所示。

　　1.布局分析

　　根据上面的布局分析，我们会产生基础的框架php商业商城开发教程，代码示例如下：

　　<v

产品详情页布局

　　本节主要讲解产品页面详情页面的布局实现，效果如图13-20所示。

　　1.布局分析

　　根据上面的布局分析，我们会产生基础的框架php商业商城开发教程，代码示例如下：

　　<view> <!—第1层-开始-->
　　 <image></image> <!—第2层-详情图片-->
　　 ……
　　<image></image> <!—第2层-详情图片-->
　　</view> <!—第1层-结束-->
　　根据效果图分析出框架的层级后php商业商城开发教程，在每个层级的view加上样式，编码实现即可。

　　2.功能实现

　　效果如图13-20产品详情页。

　　.wxml文件代码示例如下：

　　
　　<scroll-view class='box2' scroll-y='true'>
　　 <view class='box2-item' style="height:{{winHeight - 31}}px">
　　      <image src="/cp/01.jpg" class='box2-item' mode="widthFix"></image>
　　      <image src="/cp/02.jpg" class='box2-item' mode="widthFix"></image>

　　      <image src="/cp/03.jpg" class='box2-item' mode="widthFix"></image>
　　      <image src="/cp/04.jpg" class='box2-item' mode="widthFix"></image>
　　      <image src="/cp/05.jpg" class='box2-item' mode="widthFix"></image>
　　 </view>
　　</scroll-view>
　　.wxss文件样式代码示例如下：

　　/*产品详情*/
　　.box2{
　　 width: 100vw;
　　 box-sizing: border-box;
　　 white-space: nowrap; /*这个不能少*/
　　}
　　.box2-item{
　　   display: block;
　　   width: 100%; height: 100%; box-sizing: border-box;
　　}
　　.js文件代码示例如下：

　　data: {
　　    /* 页面配置 */

　　    winWidth: 0,
　　winHeight: 0,
　　},
　　onLoad: function (options) {
　　    var that = this;
　　    /* 获取系统信息 */
　　    wx.getSystemInfo({
　　      success: function (res) {
　　        that.setData({
　　          winWidth: res.windowWidth,
　　          winHeight: res.windowHeight
　　        });
　　      }
　　    });
　　}
　　小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中

　　【微信小程序参考资料】

　　（1）微信小程序学习路线

　　（2）Java微信小程序商城系统指导

　　（3）PHP微信小程序商城系统指导

　　（4）微信官方文档

（编辑：应用网_镇江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

在PHP中如何调用webse	运用PHP构造函数
细解PHP会话存储方式	PHP正则表达式基本函数