1. 程式人生 > 其它 >齊博x1標籤例項:做模板組圖單圖無圖混排的處理

齊博x1標籤例項:做模板組圖單圖無圖混排的處理

程式碼如下,

{qb:tag name="xxx" type="cms" rows="10"}

		{if ( count($rs['picurls'])>2 )}

			<li>{$rs.title}</li>
			{volist name="$rs.picurls" id="vo"}
				{if ($i<4)}
				<li><img src="{$vo.picurl}"></li>
				{/if}
			{/volist}

		{elseif ( $rs['picurl']!='' ) /}

			<li>{$rs.title}<br><img src="{$rs.picurl}"></li>

		{else /}

			<em>{$rs.title}</em>

		{/if}

{/qb:tag}

其中

( $rs['picurl']!='' ) 

代表封面圖存在,封面圖存在的話,就直接輸出圖片比如:<img src="{$rs.picurl}">

而組圖的判斷是

( count($rs['picurls'])>2 )

代表有3張以上的組圖,以此類推,組圖的判斷必須放在第一位,因為他也有封面圖。要顯示組圖的話,就要使用TP的迴圈標籤語句,比如

            {volist name="$rs.picurls" id="vo"}
				{if ($i<4)}
				<li><img src="{$vo.picurl}"></li>
				{/if}
			{/volist}

其中我們定義圖片變數為{$vo.picurl}就代表圖片網址 , 如果組圖有100張,我們不可能全部顯示出來,所以要加個判斷,就使用了TP的條件判斷標籤if

				{if ($i<4)}
				<li><img src="{$vo.picurl}"></li>
				{/if}

複製

代表只顯示前三張,因為$i這個預設存在的變數值是每迴圈一次,就類加的,比如 1 2 3 4 5

想要做成今日頭條那種圖文混排的介面,就是用上面的方法可以實現

注意上圖中組圖程式碼部分類似如下程式碼有差異,以下面的為標準

           {volist name="$rs.picurls" id="vo"}
				{if ($i<4)}
				<li><img src="{$vo.picurl}"></li>
				{/if}
			{/volist}