零基础学做网站培训介绍

当前位置:

微信小程序商品列表制作

以下为学做网站论坛关于“微信小程序商品列表制作”讲解视频教程。

微信小程序商品列表制作前需要先分析一下商品列表的布局,这个列表是包含了多个商品,每一个商品包括一个商品图片、商品标题和商品价格。

每一个商品的样式是一样的,并且每一行是显示二个商品。所以我们在制作微信小程序商品列表时,只要先写出一个商品项即可。

写商品时,我们仍然使用view组件来写,它里面包含了一个图片和二行文字。


<!-- 商品列表 -->
<view class="proList">
<view class="proListLi">
<view class="proListImg">
<image src="../../images/pro/pro01.webp"></image>
</view>
<view class="proListTit">
女士手表热卖促销低价延长保修
</view>
<view class="proListPrice">
140
</view>
</view>

wxss中也只需要控制一个项目的样式即可。


/* 商品列表样式 */
.proList{padding:10px 10px;box-sizing: border-box;display: flex;justify-content: space-between;flex-wrap: wrap;}
.proListLi{width:48%;margin-bottom: 20px;background:#fff;border-radius: 8px;overflow: hidden;}
.proListImg image{width:100%;height:200px;}
.proListTit{padding:5px 10px;font-size: 14px;}
.proListPrice{padding:5px 10px;font-size: 18px;color:#f00}

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如何注册微信小程序 图文教程 (110325 次浏览)
    要发布自己的微信小程序,首先需要在微信公众平台上注册微信小程序。注册步骤 登录“微信公众平台”,如果还没有账号,可以先注册一个。登录地址
  • 微信小程序开发授权 图文教程 (111792 次浏览)
    我们在“微信公众平台”注册好了小程序之后,接下来的工作就是开发微信小程序了。开发微信小程序前,我们需要进行授权。方法/步骤 点击“细致微信
  • 微信小程序制作步骤 图文教程 (111447 次浏览)
    上一步,我们完成了微信小程序的授权。这一步,就是使用我们购买的“微信小程序细致制作工具”,进行小程序的制作了。方法/步骤 点击左侧菜单的“
  • 什么是团购网站所谓团购网站就是团购的网络组织平台,就是互不认识的消费者,借助互联网的“网聚人的力量”来聚集资金,加大与商家的谈判能力,以求得
  • Ecshop电子商城网站如何设置商品促销,商品促销可以让ecshop促销活动发挥更大更有诱惑力的作用。ecshop分析后台系统的时候,所以不得不去分析ecshop专
  • Ecshop电子商城网站如何添加商品步骤如下:Ecshop管理后台-->左侧菜单-->商品管理-->添加新商品在打开的右边的窗口里填入商品的
  • 这里的站点统计列表,并不是之前讲的如何给网站添加统计代码,而今天讲的统计列表是指统计网站文章数目、评论数目、友链数等11个统计数据。下
  • 在之前的网站制作文章中讲到了wordpress如何调用当前分类下面的子分类的方法,但这种方法只能调用出子分类的名称,无法去调用出子分类下面的文章列表
  • 列表标签有二种,分为有序列表(ol标签)和无序列表(ul标签)。通过列表标签可以排列网站中的很多内容,让用户一目了然。列表标签在做网站和网页
  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 广州全璟皮革制品有限公司网站,本公司是一家细致印花厂家,集数码印花、服装印花、数码直喷、印花加工等设计、生产、销售。全璟数码印花公司网站由