Heim >WeChat-Applet >Mini-Programmentwicklung >Was soll ich tun, wenn das Applet keine Tabellen-Tags unterstützt?
Was soll ich tun, wenn das Applet das Tabellen-Tag nicht unterstützt?
Das Applet unterstützt das Tabellen-Tag nicht, kann es aber kann mit dem CSS-Stil display:table;Table implementiert werden.
Empfohlenes Lernen: Miniprogrammentwicklung
Die spezifische Implementierung ist wie folgt:
1. Simulieren Sie die durch den dynamischen Hintergrund erhaltenen Daten Array-Objektformat in js, und kombinieren Sie dann den Array-Objektinhalt zu einer Gruppe von drei Elementen, um ein Array-Objektformat zu bilden, und führen Sie es dann zu einem neuen Array-Objektformat zusammen. Der Grund dafür ist, drei Zellen in einer Zeile zu entwerfen:
Page({ data: { tableData: [{ //模拟动态获取到的后台数据:数组对象格式 id: 0, name: 'table-th-cell' }, { id: 1, name: 'table-th-cell' }, { id: 2, name: 'table-th-cell' }, { id: 3, name: 'table-tr-cell' }, { id: 4, name: 'table-tr-cell' }, { id: 5, name: 'table-tr-cell' }, { id: 6, name: 'table-tr-cell' }, { id: 7, name: 'table-tr-cell' }, { id: 8, name: 'table-tr-cell' }, ], threeArray: '', //模拟将后台获取到的数组对象数据按照一行3个的单元数据的格式切割成新的数组对象(简单的说:比如获取到数组是9个元素,切分成,3个元素一组的子数组) }, onLoad: function() { let that = this; let threeArray = []; // 使用for循环将原数据切分成新的数组 for (let i = 0, len = that.data.tableData.length; i < len; i += 3) { threeArray.push(that.data.tableData.slice(i, i + 3)); } console.log(threeArray); that.setData({ threeArray: threeArray }) }, })
2 , Set wxml:
<view class="table"> <block wx:for='{{threeArray}}' wx:key='*this' wx:for-item='oneArray'> <!-- 注意嵌套的数组对象 --> <view class="table-tr" wx:if='{{index<1}}'> <block wx:for='{{oneArray}}' wx:key='id'> <view class="table-th">{{item.name}}</view> </block> </view> <view class="table-tr" wx:else> <block wx:for='{{oneArray}}' wx:key='id'> <view class="table-td">{{item.name}}</view> </block> </view> </block> </view>
3. Set wxss:
.table { display: table; width: 100%; /* border-collapse 属性设置表格的边框是否被合并为一个单一的边框,解决相邻单元格边框未合并导致有些边框变粗的视觉效果 */ border-collapse: collapse; overflow-x: hidden; } .table-tr { display: table-row; width: 100%; height: 200rpx; } .table-th { display: table-cell; font-weight: bold; border: 1px solid black; text-align: center; vertical-align: middle; background-color: #ccc; } .table-td { display: table-cell; border: 1px solid black; text-align: center; vertical-align: middle; }
Der Effekt ist wie folgt:
Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Applet keine Tabellen-Tags unterstützt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!