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

 

 

 

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

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

---

index.wxml

    
        
    




    
    




    1000.00



商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称



    剩余：9999
    销量：98笔
    快递包邮




    
        
        商品详情
    


    132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456132456




    
         店铺
    
    
         客服
    
    
         购物车
    
    
        加入购物车
        立即兑换
    

---

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

 

---