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

最新推荐文章于 2025-06-06 15:04:10 发布

iZaiZaiA

最新推荐文章于 2025-06-06 15:04:10 发布

阅读量9.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端小程序文章标签：微信小程序 colorui 商品详情页仿微信胶囊

本文链接：https://blog.youkuaiyun.com/qq_31763107/article/details/88652741

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