微信小程序商城系列之商品详情页

wxml:

<!--商品幻灯片-->
<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/fenxiang.png' 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/ico_jt.png" 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>

wxss:

.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;}

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': 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'},{'img': 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },{'img': 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },{'img': 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },],indicatorDots: true,autoplay: true,interval: 5000,duration: 1000,pjDataList: [{ headpic: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', author: '张三', add_time: '2018-06-01', content:'好评好评，真实太好了!'},{ headpic: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.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) {},
})

微信小程序商城系列之商品详情页相关推荐

微信小程序商城系列之商品列表页（一）
微信小程序商城列表页 wxml: <view class='list'><block wx:for='{{dataList}}' wx:key='list' wx:for-item= ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
[微信小程序]商城之购买商品数量实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 这里有三种变更数量的方式, 加号,减号,input输入 , 这里做了限制,数量不能小于等于0并且不能超 ...
uni-app开发小程序,笔记记录6 商品详情页
学习地址零基础玩转微信小程序:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署) uniapp - 黑马优购笔记地址知识点 1 数据加 ...
【愚公系列】2022年10月微信小程序-电商项目-商品详情页面规格选择功能实现
文章目录前言一.商品详情页面规格选择功能实现二.效果前言 vant-weapp的Popup 弹出层api Props 参数说明类型默认值 show 是否显示弹出层 boolean fal ...
09_心理咨询_微信小程序项目实战_咨询师详情页静态效果实现
一.咨询师信息 1.1 页面结构在app.json里面的pages里面定义"pages/consultDetails/consultDetails" 1.定义一个view,给其添 ...
微信小程序商城系列之购物车
购物车功能基本上算是每个商城都有的功能,也是整个商城系统最重要的部分,购物车的做法有很多种,一般存放在本地缓存和数据库中比较常见,本文就是存放到了数据库中: 先放一张效果图: 先分析下要实现的功能: ...
微信小程序（九）商品详情界面
goos_detail.js // pages/goos_detail/goos_detail.js Page({/*** 页面的初始数据*/data: {indicatorDots: true,// ...

微信小程序商城系列之商品详情页

微信小程序商城系列之商品详情页相关推荐

最新文章

热门文章