在微信小程序開發(fā)過程中强岸，默認(rèn)是ListView顯示數(shù)據(jù)漩仙。然而有些需求需要 gridview列表數(shù)據(jù)扰她。怎么辦么踊兜？
1.利用百分比%+浮動實(shí)現(xiàn)
1.WXML文件
<view class='gridview'>
<block wx:for="{{listdata}}" wx:key="key">
<view class='gridview-item'>
<text>{{item.content}}</text>
</view>
</block>
</view>
2 .重點(diǎn)是樣式 wxss
.gridview{
margin: 5rpx 10rpx 5rpx 10rpx;
}
.gridview-item{
margin: 1%;
width: 48%;
height: 300rpx;
float: left;
background: rebeccapurple
}
注意事項(xiàng)：
不要給gridview父布局添加display: flex;屬性
3.js文件
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
listdata: [{
content: "內(nèi)容1"
},
{
content: "內(nèi)容2"
},
{
content: "內(nèi)容3"
}
]
},
onLoad: function(event) {
}
})
效果圖：
yhx.gif
如果要實(shí)現(xiàn)三列怎么辦竿滨？
答案：把windth=33.3333%,注意這是平分屏幕三等分，注意還要去掉間隙的寬捏境，做微調(diào)即可
