ColorUI 微信小程序 商品详情页模板，仿微信胶囊

 

 

 

使用的是colorui的小程序UI框架。

colorui地址：https://www.color-ui.com/

---

index.wxml

<!--商品轮播图-->
<swiper class="screen-swiper square-dot bg-white" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
    <swiper-item wx:for="{{swiperlist}}" wx:key="index">
        <image src="{{item}}" mode='aspectFill'></image>
    </swiper-item>
</swiper>

<!--左上角按钮-->
<view class="canui-head-box" style="top:{{StatusBar}}px;">
    <text class="icon-back"></text>
    <text class="icon-home"></text>
</view>

<!--商品价格-->
<view class="bg-white canui-goods-box" style="padding-top:30rpx;">
    <text class="text-price text-red text-xl">1000.00</text>
</view>

<!--商品名称-->
<view class="bg-white canui-goods-box canui-xzwz text-black">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>

<!--商品属性-->
<view class="bg-white grid col-3 canui-goods-box text-gray text-sm">
    <view class='padding-sm'>剩余：9999</view>
    <view class='padding-sm text-center'>销量：98笔</view>
    <view class='padding-sm text-right'>快递包邮</view>
</view>

<!--商品详情-->
<view class="cu-bar bg-white margin-top solid-bottom">
    <view class='action'>
        <text class='icon-title text-red'></text>
        <text>商品详情</text>
    </view>
</view>
<view class="bg-white padding cauni-details-box">
    132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456
</view>

<!--TabbarBot为适配全面屏的，如果是全面屏，则底部多出一截空白-->
<view class="cu-bar bg-white tabbar border shop canui-foor-fixed {{TabbarBot=='y'?'canui-tabbar-bottom':''}}">
    <view class="action text-grey">
        <view class='icon-shop text-red'></view> 店铺
    </view>
    <button class="action text-grey" open-type='contact'>
        <view class='icon-service'></view> 客服
    </button>
    <view class="action text-grey">
        <view class='icon-cart'></view> 购物车
    </view>
    <view class='btn-group'>
        <button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
        <button class='cu-btn bg-red round shadow-blur'>立即兑换</button>
    </view>
</view>

---

index.wxss

.screen-swiper {
    min-height:555rpx;
}
/*-------左上角按钮-------*/
.canui-head-box{
    position:absolute;
    top:27px;
    margin-left:10px;
    background:rgba(0,0,0,0.2);
    color:#fff;
    border-radius:20px;
    padding:4px 4px;
    border:1px solid rgba(255,255,255,0.3);
}
.canui-head-box text{
    padding:8px;
    font-size:20px;
}
.canui-head-box text + text{
    border-left:1px solid rgba(255,255,255,0.3);
    margin:0 3px;
    padding:0 5px;
    padding-left:15px;
}

.canui-goods-box{
    padding:10rpx 30rpx;
}

.canui-xzwz{
    -webkit-line-clamp:2;
}
.cauni-details-box{
    word-wrap:break-word;
}
.cu-bar.tabbar.shop .action {
    width:100rpx;
}
.cu-bar.tabbar .action {
    font-size:20rpx;
}
.cu-bar.tabbar .action [class*="icon"] {
    width:38rpx;
}

 

---

index.js

const app = getApp();
Page({
    data: {
        StatusBar: app.globalData.StatusBar + 7,
        TabbarBot: app.globalData.tabbar_bottom,
        swiperlist: [
            'https://image.weilanwl.com/img/4x3-1.jpg',
            'https://image.weilanwl.com/img/4x3-2.jpg',
            'https://image.weilanwl.com/img/4x3-3.jpg',
            'https://image.weilanwl.com/img/4x3-4.jpg',
        ],
    },
    onLoad: function (options) {
        let that = this;
    }
});

 

---

 

app.js

//app.js
App({
    onLaunch: function () {
        wx.getSystemInfo({
            success: e => {
                this.globalData.StatusBar = e.statusBarHeight;
                let custom = wx.getMenuButtonBoundingClientRect();
                this.globalData.Custom = custom;
                let CustomBar = custom.bottom + custom.top - e.statusBarHeight;
                this.globalData.CustomBar = CustomBar;
                //适配全面屏底部距离
                if (CustomBar > 75) {
                    this.globalData.tabbar_bottom = "y"
                }
            }
        })
    },
    globalData: {
        userInfo: null
    }
});

 

---

 

app.wxss

.canui-xzwz{
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
}
.canui-foor-fixed{
  position: fixed;
  bottom: 0;
  width: 100%;
}
.canui-tabbar-bottom{
  padding-bottom:20rpx;
  min-height:150rpx;
}

 

---