微信小程序商品详情页面开发案例

商品详情页面开发案例

页面详细设计

详细设计步骤：

<!--pages/goods1/goods1.wxml-->
<text>这是一个测试</text>
<!--商品幻灯片-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" class="banner"duration="{{duration}}" circular="{{duration}}"><block wx:for="{{goods_img}}" wx:key="goods_info"><swiper-item><image src="{{imghref}}{{item.img}}" class="slide-image" mode="aspectFill" data-src='{{imghref}}{{item.img}}'bindtap="previewImage" /></swiper-item></block>
</swiper>
<!--商品幻灯片 end-->
<view class="info-price clear"><view class='price'>￥{{goods_info.goods_price}} </view><view class='fenxiang'><button class='fxbtn' open-type="share"><view style='height:20px;margin-top:8px;'><image src='/img/mryhtx.jpg' mode="aspectFill"></image></view><view>分享</view></button></view>
</view>
<view class="info-title"><text>{{goods_info.goods_title}}</text>
</view><view style="border-top:1px solid #F6F6F6;background: #fff; padding:5px 15px;"><view class="clearfix flex grey gridXt"><text class="sub"><block wx:if='{{goods_info.goods_yunfei==0.00}}'>运费：包邮</block><block wx:else>运费：{{goods_info.goods_yunfei}}</block></text><text class="sub">库存：{{goods_info.goods_kucun}}</text><text class="sub">销量：{{goods_info.goods_xiaoliang}}</text></view>
</view>
<block wx:if="{{pjDataList!=''}}"><!--评价--><view class='pj_box'><view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;"><view style='float:left;'>商品评价</view><view style='float:right;margin-left:2px;margin-top:-1px;'><image src="/img/mryhtx.jpg" class="ico_img_jt"></image></view><view style='float:right;font-size:12px;color:#A2A2A2;'><navigator url="pjList?id={{goods_id}}">查看全部</navigator></view><view class='clear'></view></view><block wx:for="{{pjDataList}}" wx:for-item="item" wx:key="pj"><view class="list_item"><view class='pj_u_info clear'><view class='header_img'><image src="{{item.headpic}}" mode="aspectFit"></image></view><view class='name'>{{item.author}}</view><view class='time'>{{item.add_time}}</view></view><view class='pj_cont'>{{item.content}}</view></view></block></view>
</block>
<!--商品详情-->
<view class='details_box'><view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;"><view>商品详情</view></view><view style='padding:10px 0px;'><view class="wxParse">{{goods_info.content}}</view></view>
</view><!--底部浮动 start-->
<view class="foot-nav mt15"><view class="flex con gridXt tc"><view class="fast-links mr15 flex f12"><view class="sub gridYr" bindtap='shoucang'><text class="iconfont {{is_shoucang==0?'icon-shoucang1':'icon-shoucang2'}}">收藏</text></view><view class="sub kefu"><button open-type="contact"><text class="iconfont icon-lianxikefu">客服</text></button></view><view class="sub gridYr"><text class="iconfont icon-gouwuche">购物车</text></view></view><view class="add-cart sub f16"><button class="add-cart-btn" bindtap='buy'>立即购买</button></view></view>
</view>

// pages/goods1/goods1.js
// index/details.js
Page({/*** 页面的初始数据*/data: {is_shoucang: 0,goods_info: {goods_id: 1,goods_title: "商品标题1",goods_price: '100',goods_yunfei: 0,goods_kucun: 100,goods_xiaoliang: 1,content: '商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情'},goods_img: [{'img': '26&gp=0.jpg'},{'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.sooshong.com%2Fpicture%2Fuserpic2%2F2013-8-8%2F574973201388164942.jpg&refer=http%3A%2F%2Fpic.sooshong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=37e1728bfdcf7cd60b653084960e1cfe'},{'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F20%2F37%2FQpKhSYBpcK.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=5c96e332bfee553001bcc4b7807bd90c'},{'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F4763a03d-ff3e-485b-a4ba-1278ad50223a%40r_750w_750h_ss1.jpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=578694ae6a3194f8285c64277d5dc34c'},],indicatorDots: true,autoplay: true,interval: 5000,duration: 1000,pjDataList: [{headpic: '/img/mryhtx.jpg',author: '张三',add_time: '2018-06-01',content: '好评好评，真实太好了!'},{headpic: '/img/mryhtx.jpg',author: '张三',add_time: '2018-06-01',content: '好评好评，真实太好了!'}], //评价数据},previewImage: function (e) {var current = e.target.dataset.src;var href = this.data.imghref;var goodsimg = this.data.goods_img;var imglist = [];for (var i = 0; i < goodsimg.length; i++) {imglist[i] = href + goodsimg[i].img}wx.previewImage({current: current, // 当前显示图片的http链接  urls: imglist // 需要预览的图片http链接列表  })},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

.clear {clear: both;overflow: hidden;
}.banner {height: 300px;
}.slide-image {width: 100%;height: 100%;
}/*分享按钮*/
.fenxiang button::after {border: none;
}.fxbtn {background: none;border: 0px;margin: 0px;padding: 0px;border-radius: 0px;font-size: 12px;
}.flex {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;width: 100%;
}.flex>.sub {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;overflow: hidden;
}.info-title {background: #fff;padding: 10px 15px;font-size: 15px;
}.info-price {border-bottom: 1px solid #F6F6F6;background: #fff;padding: 0px 15px;
}.price {float: left;height: 50px;line-height: 50px;color: #FF6666;font-size: 25px;
}.fenxiang {text-align: center;font-size: 12px;color: #999;width: 50px;line-height: 20px;overflow: hidden;float: right;
}.fenxiang image {width: 20px;height: 20px;
}.price em {font-size: 12px;margin-left: 20px;
}.flex {position: relative;width: auto;margin: 0 -15px;padding: 3px 15px 0;
}.store-info {background: #fff;
}.store-info .store,
.store-info .rz-item {padding: 10px 15px;
}.store-info .rz-item view {margin-right: 10px;
}.list_item {position: relative;padding: 15px 10px;background: #fff;border-bottom: 1px solid #f5f5f5;
}.details_box {margin-top: 10px;padding: 0 15px;font-size: 13px;background: #fff;
}.pj_box {margin-top: 10px;padding: 0 15px;font-size: 13px;background: #fff;
}.ico_img_jt {vertical-align: middle;width: 16px;height: 16px;
}.pj_u_info .header_img {float: left;
}.pj_u_info .header_img image {width: 20px;height: 20px;border-radius: 50%;overflow: hidden;
}.pj_u_info .name {float: left;margin-left: 10px;font-size: 15px;color: #333;
}.pj_u_info .time {float: right;font-size: 12px;color: #999;
}.pj_cont {font-size: 13px;
}.pj_img {margin: 10px 10px 0px 10px;width: 120px;height: 100px;
}.foot-nav {height: 46px;
}.foot-nav .con {position: fixed;height: 46px;left: 0;bottom: 0;right: 0;background: #fff;z-index: 999;
}.fast-links {width: 160px;line-height: 18px;text-align: center;
}.fast-links .iconfont {padding: 5px 0;
}.fast-links .iconfont::before {display: block;margin-top: 5px;font-size: 18px;
}.notempty {position: relative;
}.notempty::after {content: "";display: block;width: 9px;height: 9px;border: 1px solid #fff;border-radius: 50%;background: #e64340;position: absolute;top: 5px;right: 50%;margin-right: -16px;
}.add-cart .add-cart-btn {background: linear-gradient(to right, #FF7A34, #EE32FF);color: #fff;border-radius: 50px;padding: 0px;width: 150px;height: 35px;line-height: 35px;margin-top: 5px;margin-right: 15px;
}.kefu button {border: none;background: none;display: block;padding: 0px;margin: 0px;line-height: 1.5em;font-size: inherit;
}.kefu button::after {border: none;
}.kefu .button-hover {color: #333;background: none;
}.kefu button .iconfont {padding: 0px;
}.icon-shoucang2 {color: red;
}

微信小程序商品详情页面开发案例相关推荐

微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）
前段书写 <view class="about"><block wx:for="{{swiperTit ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）
maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!).. 源码下载:http://download. ...
微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）
目录前言效果展示主体内容前言此篇文章纯代码较多,细节解释,今后会出更加详细的解释效果展示保存的内容,可以长按删除,视频时长原因就不一一展示,具体效果如下视频主体内容这里one-adv ...
微信小程序新闻详情页面效果实现
  <view class="d ...
微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...

微信小程序商品详情页面开发案例

商品详情页面开发案例

页面详细设计

详细设计步骤：

微信小程序商品详情页面开发案例相关推荐

最新文章

热门文章