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