微信小程序?qū)崿F(xiàn)橫向增長表格的方法
更新時間：2018年07月24日 10:49:14 作者：reoak
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)橫向增長表格的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
效果圖如下所示：
下面給大家分享微信小程序橫向增長表格的實例代碼，代碼如下所示：
<view class='table'>
<view class='tr'>
<view class='td' wx:for='{{array}}'>{{item.day}}</view>
</view>
<view class='tr'>
<view class='td' wx:for='{{array}}'>{{item.number}}</view>
</view>
</view>
.table {
font-size: 24rpx;
margin-top: 50rpx;
border: 1rpx solid #dadada;
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.td {
padding: 10rpx;
border-bottom: 1rpx solid #dadada;
border-right: 1rpx solid #dadada;
text-align: center;
width: 100%;
}
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
array: [{
day: '7-24',
number: 4
},
{
day: '7-23',
number: 32
},
{
day: '7-22',
number: 32
},
{
day: '7-21',
number: 25
},
{
day: '7-20',
number: 32
},
{
day: '7-19',
number: 33
},
{
day: '7-18',
number: 33
}]
},
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)橫向增長表格的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript打印html內(nèi)容功能的方法示例
這篇文章主要介紹了javascript打印html內(nèi)容的小示例，大家參考使用2013-11-11
這篇文章主要介紹了javascript 的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)移動端吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
下面小編就為大家?guī)硪黄猨avascript小數(shù)精度丟失的完美解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了Hammer.js+輪播原理實現(xiàn)簡潔的滑屏功能的相關(guān)資料,需要的朋友可以參考下2016-02-02
新發(fā)現(xiàn)原來documenet.URL也可以實現(xiàn)頁面跳轉(zhuǎn)
新發(fā)現(xiàn)原來documenet.URL也可以實現(xiàn)頁面跳轉(zhuǎn)...2007-08-08
JavaScript判斷手機(jī)號運(yùn)營商是移動、聯(lián)通、電信還是其他(代碼簡單)
本文由腳本之家小編給大家分享的基于js判斷手機(jī)號運(yùn)行商是移動、聯(lián)通、電信還是其他的，然后根據(jù)不同的運(yùn)營商做出對應(yīng)的處理，感興趣的朋友一起學(xué)習(xí)吧2015-09-09
“DOM2級遍歷和范圍”模塊定義了“范圍”接口。通過范圍可以選擇文檔中的一個區(qū)域，而不必考慮節(jié)點(diǎn)的界限（選擇在后臺完成，對用戶是不可見的）。下面這篇文章主要介紹了Javascript中DOM范圍的相關(guān)資料，需要的朋友可以參考下。2017-02-02
這篇文章主要介紹了js同源策略,較為詳細(xì)的分析了javascript中同源策略的概念與相關(guān)應(yīng)用注意事項,需要的朋友可以參考下2015-05-05
從零開始做一個pagination分頁組件，這篇文章主要介紹了pagination分頁組件的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03