微信小程序红色风格带幻灯商品详情样式模板制作设计下载 立即下载
首页 > 小程序教程 > 微信小程序红色风格带幻灯商品详情样式模板制作设计下载

微信小程序红色风格带幻灯商品详情样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下：
一、wxml页面代码如下：
<view class="container">
	<!-- 轮播图片 -->
	<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="banner">
		<block wx:for="{{imgMsg}}">
			<swiper-item>
				<image src="{{item.imgUrl}}"/>
			</swiper-item>
		</block>
	</swiper><!-- 轮播图片end -->	
	<!-- 商品信息 -->
	<view class="proMsg">
		<view class="proName">
			Canmake缤纷糖果保湿唇彩 唇蜜 01经典粉色
		</view>
		<text class="price">￥555.00</text>		
		<view class="salse">
			<view class="left">3人在卖</view>
			<view class="middle">已出售:2</view>
			<view class="right">运费:免运费</view>
		</view>
	</view><!-- 商品信息end -->
	<!-- 店家信息 -->
	<view class="shopMsg">
		<view class="shopMsg_top">
			<view class="shop_pho">
				<image src="http://ojhq3mgil.bkt.clouddn.com/478/20161227/201612271616015049.jpg"></image>
			</view>
			<view class="shopMsg_right">
				<view class="shopName">
					<view>上善若水</view>	
					<view class="shop_leve"><image src="../../images/member_bg02.png"></image><text>1</text></view>
					<view>☆</view>	
				</view>
				<view class="shopLabel">
					<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822325408.jpg"></image>
				</view>
			</view>
		</view>
		<view class="shopMsg_middle">
			<view><view>38</view>商品数</view>
			<view class="fx_num"><view>20</view>分销会员</view>
			<view><view>13</view>关注数</view>
		</view>
		<view class="shopMsg_bottom">
			<button plain="{{true}}"><image  src="../../images/icon_follow.png"></image>关注店铺</button>
			<button plain="{{true}}"><image  src="../../images/icon_shop.png"></image>进店逛逛</button>
		</view>
	</view> <!-- 店家信息end -->
	<!-- 热销产品 -->
	<view class="hot_product">
		<view><image src="../../images/line.png"></image></view>
		<view>热销产品</view>
		<view><image src="../../images/line02.png"></image></view>
	</view>
	
	<!-- 图文详情 -->
	<view class="hot_product">
		<view><image src="../../images/line.png"></image></view>
		<view>图文详情</view>
		<view><image src="../../images/line02.png"></image></view>
	</view>
	<view class="details_pic">
		<view>
			<image mode="widthFix" src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301544571865.jpg"></image>
		</view>
		<view>
			<image mode="widthFix" src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301545018473.jpg"></image>
		</view>
		<view>
			<image mode="widthFix" src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301545049022.jpg"></image>
		</view>
	</view>
	
	<view class="bottom_item_wrap">
		<view class="bottom_item">
			<view class="icon_service">
				<image src="../../images/icon_service.png"></image>
			</view>
			<view class="bottom_item_right">
				<view class="btn" bindtap="isShow">加入购物车</view>
				<view class="buy_btn btn">立即购买</view>
			</view>
		</view>
	</view>
	
	<block wx:if="{{isShow}}">
		<view class="add_item_show">
			<view class="buy_cont">
				<view class="shopcar">
					<view class="shopcar_top">
						<view class="pro_pic">
							<image src="http://ojhq3mgil.bkt.clouddn.com/web/497/20161230/201612301544193344.jpg"></image>
						</view>
						<view class="kucun">
							<view class="price">￥132.00</view>
							<view>库存120件</view>
						</view>
						<view class="close" bindtap="isClose">×</view>
					</view>
					<view class="num">
						<view class="sl">数量：</view>
						<view class="buynum">
				            <view class="disnum" data-alpha-beta="0" bindtap="changeNum">-</view>
				            <view class="nownum">{{buynum}}</view>
				            <view class="addnum" data-alpha-beta="1" bindtap="changeNum">+</view>
				          </view>
					</view>
				</view>
				<view class="true_btn">确认</view>
			</view>
		</view>
	</block>
	


	

</view>
 
二、wxss样式文件代码如下：
.container{
	margin-bottom: 65px;
}
.banner{
	width: 100%;
	height: 600rpx;
}
.banner image{
	width: 100%;
	height: 100%;
}
.proMsg{
	background-color: white;
}
.proMsg .proName{
	padding: 10rpx 20rpx;
	font-size: 28rpx;
	line-height: 30rpx; 
	color: #333;
}
.proMsg .price{
	color: #ff6662;
	font-size: 36rpx;
	margin-left: 20rpx;
	line-height: 80rpx;
}
.proMsg .salse{
	display: flex;
	padding: 10rpx 20rpx;
	text-align: center;
	border: 1rpx solid #f3f3f3;
	font-size: 28rpx;
	color: #888888;
	line-height: 80rpx;
}
.proMsg .salse view{
	width: 33.33%;
}
.proMsg .salse .middle{
	border-left: 1rpx solid #f3f3f3;
	border-right: 1rpx solid #f3f3f3;
}

/*店铺信息*/
.shopMsg{
	background-color: white;
	padding: 20rpx 20rpx;
	margin: 10rpx auto;
}
.shopMsg_top{
	display: flex;
}
.shopMsg_top .shop_pho{
	width: 100rpx;
	height: 100rpx;
}
.shopMsg_top .shop_pho image{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.shopMsg_right{
	flex:1;
	padding:10rpx 0rpx 0 20rpx;
}
.shopMsg_right .shopName{
	font-size: 24rpx;
	display: flex;
}
.shopMsg_right .shopName .shop_leve{
	width: 60rpx; 
	height: 30rpx;
	position: relative;
	margin: 0 10rpx;
}
.shopMsg_right .shopName .shop_leve text{
	position: absolute;
	top: 0rpx;
	left: 38rpx;
	color: white;
}
.shopMsg_right .shopName .shop_leve image{
	width: 100%;
	height: 100%;
}
.shopMsg_right .shopLabel{
	width: 80rpx;
	height: 40rpx;
	margin-top: 10rpx;
}
.shopMsg_right .shopLabel image{
	width: 100%;
	height: 100%;
}
.shopMsg_middle{
	display: flex;
	text-align: center;
	line-height: 24px;
	font-size: 30rpx;
	color: #555555;
	padding: 20rpx;
}
.shopMsg_middle .fx_num{
	border-right: 1px solid #f3f3f3;
	border-left: 1px solid #f3f3f3;
}
.shopMsg_middle>view{
	width: 33.33%;
}
.shopMsg_bottom{
	display: flex;
}
.shopMsg_bottom button{
	border: 1px solid #9d9d9d;
	font-size: 14px;
	line-height: 36px;
	width: 40%;
}
.shopMsg_bottom button image{
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
}

/*热销产品*/
.hot_product{
	display: flex;
	text-align: center;
	background-color: #fff;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
}
.hot_product>view{
	width: 33.33%;
}
.hot_product image{
	width: 100%;
	height: 50px;
}
.details_pic image{
	width: 100%;
	all:initia;
}
/*底部购物车栏*/
.bottom_item_wrap{
	position: fixed;
	bottom: 0;
	width: 100%;
}
.bottom_item{
	display: flex;
}
.bottom_item>view{
	background-color: #666;
	color: #fff;
}
.bottom_item .icon_service{
	width: 50px;
	height: 50px;
	border-right: 1px solid #f3f3f3;
	padding: 5px;
}
.bottom_item .icon_service image{
	width: 100%;
	height: 100%;
}
.bottom_item .bottom_item_right{
	flex:1;
	font-size: 20px;
	line-height: 60px;
	text-align: center;
	display: flex;
}
.bottom_item .bottom_item_right>view{
	width: 50%;
}
.bottom_item .bottom_item_right .buy_btn{
	border-left: 1px solid #f3f3f3;
	background-color: #ff6662;
}
.add_item_show{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,0.5);
}
.add_item_show .buy_cont{
	background-color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.add_item_show .shopcar{
	height: 120px;
	padding: 10px;
}
.add_item_show .shopcar>view{
	height: 60px;
}
.add_item_show .shopcar_top{
	position: relative;
	border-bottom: 1px solid #f3f3f3;
}
.add_item_show .shopcar_top>view{
	float: left;
}
.add_item_show .pro_pic{
	position: relative;
	top: -30px;
	width: 60px;
	height: 60px;
}
.add_item_show .pro_pic image{
	width: 100%;
	height: 100%;
}
.add_item_show .shopcar_top .close{
	position: absolute;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	color: #ccc;
	top: 0px;
	right: 0px;
}
.add_item_show .shopcar_top .kucun{
	font-size: 28rpx;
	color: #333;
}
.add_item_show .shopcar_top .price{
	font-size: 36rpx;
	color: #ff6662;
}
.add_item_show .shopcar .num{
	font-size: 12px;
	color: #333;
	/*display: flex;*/
}
.add_item_show .shopcar .num>view{
	margin-top: 20px;
}
.add_item_show .shopcar .num .sl{
	float: left;
}

.add_item_show .shopcar .num .buynum{
    display: flex;
    height: 40rpx;
    width: 40%;
    text-align: center;
    line-height: 40rpx;
    border: 1rpx solid #f3f3f3;
    float: right;
}
.add_item_show .shopcar .num .buynum .nownum{
    flex: 1;
    border-left: 1rpx solid #f3f3f3;
    border-right: 1rpx solid #f3f3f3;
}
.add_item_show .shopcar .num .disnum,.add_item_show .shopcar .num .addnum{
    width: 40rpx;
}
.add_item_show .buy_cont .true_btn{
	text-align: center;
	padding: 15px;
	font-size: 14px;
	background-color: #ff6662;
	color: #fff;
}
三、js页面代码如下：
Page({
    data: {
    imgMsg: [
  {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/442/20160822/201608221341146251.jpg',
  picDisc:'创意卡扣式手机支架托架办公室桌面可爱老人苹果小米通用手机座'},
  {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/447/20160908/201609081145371577.jpg',
  picDisc:'彩色杯子w'},
  {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/453/20160930/201609301548075198.jpg',
  picDisc:'女款黑色前胸字母绣花连帽卫衣'},
  {imgUrl:'http://ojhq3mgil.bkt.clouddn.com/500/20161021/201610211626005082.jpg',
  picDisc:'七夕情人节金箔玫瑰礼品'}
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    isShow:false,
    buynum:1
  },
  isShow:function  () {
    this.setData({
        isShow : true
      })
  },
  isClose:function  () {
    this.setData({
        isShow : false
      })
  },
  changeNum:function  (e) {
    var that = this;
    if (e.target.dataset.alphaBeta == 0) {
        if (this.data.buynum <= 1) {
            buynum:1
        }else{
            this.setData({
                buynum:this.data.buynum - 1
            })
        };
    }else{
        this.setData({
            buynum:this.data.buynum + 1
        })
    };
  }

})

模板简介：该模板名称为【微信小程序红色风格带幻灯商品详情样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 15,876次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-01
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
响应式 html5 微信文章 微信模板 微信素材 微信公众平台 自适应 微信图片 企业网站 单页式简历模板
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 646
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 737
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,974
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,323
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,803
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,553
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备42011302000988号 懒人模板-Copyright © 2023 版权所有