• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

 

 

使用的是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;
}

 


 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
助力小程序生态发展 “小程序生态孵化社区”成立发布时间:2022-07-18
下一篇:
小程序scss页面布局发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap