介绍/*,组件/threeColumnGrid/threecolgrid.wxss */@import “. ./. ./iconfont.wxss";/*,.main-content {
,,背景:# FFF;
,,margin-top: 155 rpx;
填充才能:10 rpx;
}*/.bookbox {
,,显示:flex;
flex-direction:,才能行;
,,justify-content:之间的空间;
flex-wrap才能:包装;
,,背景:# FFF;
}
.bookbox .bookinfo {
,,显示:flex;
,,flex-direction:列;
,,justify-content:中心;
,,对齐项目:中心;/*,才能边界:,1 rpx solid # f5a32d; */}
{.bookbox .bookinfo 图像
,,显示:flex;/*,才能调节图书列,*//*,才能宽度:220 rpx;, */,,border-top-left-radius: 10 rpx;
border-top-right-radius才能:10 rpx
}
.bookbox .bookinfo .title {
,,显示:flex;
flex-wrap才能:包装;
,,字体大小:小;
,,margin-bottom: 5 rpx;/*,才能调节图书列,*//*,才能宽度:300 rpx; *//*,才能宽度:220 rpx; */,,身高:70 rpx;
}
.bookbox .bookinfo .actionBar {
,,显示:flex;
,,justify-content:之间的空间;
,,对齐项目:中心;
,,填充:0 rpx 5 rpx 5 rpx 5 rpx;
,,字体大小:小;/*,才能宽度:200 rpx; */}
.bookbox .bookinfo .actionBar .bookstatus {
,,显示:flex;
,,这个特性:10 rpx;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下小程序自定义组件怎么弄,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
文件:threecolgrid。js
& lt; !——组件/threeColumnGrid/threecolgrid.wxml祝辞
& lt; !——, & lt; view 类=& # 39;main-content& # 39;祝辞,——比;
& lt;才能view 类=& # 39;bookbox& # 39;,风格=& # 39;填充:{{mainPadding}} rpx;保证金:{{mainMargin}} rpx; & # 39;比;
,,,& lt; block 天气:为=皗{booksData}},,天气:关键=皗{item.id}}“比;
,,,,,& lt; view 类=& # 39;bookinfo # 39;,风格=& # 39;margin-bottom:,{{行空间}}rpx; & # 39;比;
,,,,,,,& lt; image src=https://www.yisu.com/zixun/{{item.url}}的模式=皐idthFix”=翱矶?{{(740 - 2 * mainPadding - 2 * mainMargin)/3 - colSpace * 3}} rpx; ">
<视图类=氨晏狻毖?'宽度:{{(740 - 2 * mainPadding - 2 * mainMargin)/3 - colSpace * 3}} rpx; "> {{item.title}}
<视图类=癮ctionBar”风格='宽度:{{(740 - 2 * mainPadding - 2 * mainMargin)/3 - colSpace * 3}} rpx; ">
<块wx:如果="{{项目。状态==0}}">
<视图类=' bookstatus禁用'>暂缺货
<视图bindtap=扒┤搿眃ata-bookid='{{项目。id}}{{项数据状态=５匚粆}”class=癷confont图标- 219心脏图标的>
<块wx:其他>
<视图类=癰ookstatus启用”>可借阅
<视图bindtap=扒┤搿眃ata-bookid='{{项目。id}}{{项数据状态=５匚粆}”class=癷confont图标- 059购物车图标的>
<！—— 
