产品商城模板
css.js、json、wxml、wxss
data: {
message: [
{
title: "iPhoneX",
author: "抽奖",
img: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4120007999,281538152&fm=26&gp=0.jpg"
},
{
title: "全新MacBookPro",
author: "抽奖",
img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=319301119,452133303&fm=26&gp=0.jpg"
},
{
title: "iPhoneXR",
author: "抽奖",
img: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=19270294,2698966114&fm=26&gp=0.jpg"
},
{
title: "iPad Pro",
author: "抽奖",
img: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4062447465,3055393178&fm=26&gp=0.jpg"
}
]
}
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "white",
"navigationBarTitleText": "Apple",
"navigationBarTextStyle": "black"
}
<import src="../../template/message/message.wxml"/>
<template is="message" wx:for="{{message}}" data="{{...item}}"/>
@import "../../template/message/message.wxss";
detail.js、wxml、wxss
data: {
// 商品详情介绍
detailImg: [
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_0_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_1000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_1500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_2000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_2500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_3000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_3500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_4000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_4500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_5000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_5500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_6000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_7500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_8000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_8500_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_9000_750_500&imageView&thumbnail=710x0&quality=85",
"https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_9500_750_376&imageView&thumbnail=710x0&quality=85",
],
// banner
imgUrls: [
"http://img14.360buyimg.com/n0/jfs/t1/763/23/3810/69901/5b997c0bE935c19c5/ce91ae1a89c113c7.jpg",
"https://img14.360buyimg.com/n0/jfs/t1/4460/2/3458/153299/5b997bf0Ed101778b/2361563781a99acb.jpg",
"https://img14.360buyimg.com/n0/jfs/t1/21737/38/3433/75469/5c26e06aE7a296f9e/6e20b4387a648f4f.jpg",
"https://img14.360buyimg.com/n0/jfs/t10450/186/1312686657/70920/1167f96b/59df2e83Nc6f15397.jpg",
"https://img14.360buyimg.com/n0/jfs/t8284/363/1326459580/71585/6d3e8013/59b857f2N6ca75622.jpg"
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔,3s
duration: 1000, // 滑动动画时长1s
}
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
<!--图文详情按钮-->
<view class='tab-bar-detail'>
<text>图文</text>
<text>详情</text>
</view>
<view class="product-price-wrap">
<view>
<p class="product-price-new">￥7935.84</p>
<p class="product-price-old">原价￥9018.00</p>
<p class="discount">8.8折</p>
</view>
<view>
<image src="../img/fenxiang.png" />
</view>
</view>
<view class="product-name-wrap">
<text>Apple iPhone X手机 苹果x 全网通4G 全面屏手机 银色 官方标配 256G</text>
</view>
<view class="details">
<scroll-view scroll-y="true">
<block wx:for-items="{{detailImg}}" wx:key="name">
<image class="image_detail" src="{{item}}" mode="widthFix"/>
</block>
</scroll-view>
</view>
page {
display: flex;
flex-direction: column;
height: 100%;
}
/* 直接设置swiper属性 */
swiper {
/* height: 500rpx; */
height: 600rpx;
background: #F3F4F6;
text-align: center;
}
swiper-item image {
width: 80%;
height: 100%;
}
/**图文详情 浮层**/
.tab-bar-detail{
width: 75rpx;
height: 75rpx;
background-color: #fff;
border-radius:25px;
position: fixed;
z-index: 2;
right: 4%;
top:500rpx;
border:1rpx solid #F3F4F6;
line-height:25rpx;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.tab-bar-detail text{
font-size: 22rpx;
color: #e80080;
}
/**商品价格**/
.product-price-wrap{
display: flex;
justify-content:space-between;/**两边对齐**/
flex-direction: row;
flex-wrap: wrap;
margin:5px 5px;
/* border:1rpx solid red; */
}
.product-price-wrap .product-price-new{
color: #e80080;
font-weight:400;
font-size: 24px;
}
.product-price-wrap .product-price-old{
color: #888;
text-decoration: line-through;
padding-left: 5px;
font-size: 14px;
line-height:30px;
font-weight:300;
}
.product-price-wrap .discount{
margin: 5px 5px;
background-color: #000;
color: #fff;
height: 18px;
font-size: 14px;
border-radius:2px;
}
.product-price-wrap image{
width:40rpx;
height: 40rpx;
margin: 5px 5px;
}
.product-name-wrap{
margin: 20px 10px;
/* border:1rpx solid red; */
}
.product-name-wrap text{
font-size: 14px;
font-weight:400;
line-height: .48rem;
color: #404040;
}
.details{
width: 100%;
}
.detail {
display: flex;
flex-direction: column;
margin-top: 15rpx;
margin-bottom: 0rpx;
}
网友评论