需求是这样的:
需要根据后台传入的数据动态生成view控件,固定每行展示三个,多出来的自动换行。
如果用js来写想必比较简单,由于接触微信小程序时间不算太长,对于前端的一些写法难免运用不是很熟练。
这是我的目录结构:
相关的思路我已经在代码里打了注释了, 直接上代码吧。
linkBook.js
//获取应用实例
var app = getApp()
Page({
data: {
// 后台数据结构获取参照前台js数据结构
linkBookData:[
{
id: 'P_A',
name: '物业服务',
child: [
{
id: 'A',
name: '物业电话',
tel: '23',
img: '../../images/linkBook/shentong.png'
},
{
id: 'B',
name: '物业投诉',
tel: '321-8888',
img: '../../images/linkBook/shentong.png'
}
]
},
{
id: 'P_B',
name: '社区及公安电话',
child: [
{
id: 'A',
name: '公安局派出所',
tel: '123',
img: '../../images/linkBook/policeMan.png'
},
{
id: 'B',
name: '户口迁移办理电话:',
tel: '321',
img: '../../images/linkBook/policeMan.png'
},
{
id: 'C',
name: '街道',
tel: 'ewew',
img: '../../images/linkBook/sjcwy.png'
}
]
},
{
id: 'P_B',
name: '社区及公安电话',
child: [
{
id: 'A',
name: '公安局派出所',
tel: '123',
img: '../../images/linkBook/policeMan.png'
},
{
id: 'B',
name: '户口迁移办理电话:',
tel: '321',
img: '../../images/linkBook/policeMan.png'
},
{
id: 'C',
name: '街道',
tel: 'ewew',
img: '../../images/linkBook/sjcwy.png'
},
{
id: 'C',
name: '街道',
tel: 'ewew',
img: '../../images/linkBook/sjcwy.png'
}
]
}
]
},
//拨打电话事件
phone: function (e) {
var tel = e.target.dataset.tel;
wx.showModal({
title: '提示',
content: '确定拨打电话:' + tel + ' ? ',
success: function (res) {
if (res.confirm) {
wx.makePhoneCall({
phoneNumber: tel,
success: function (res) {
// success
}
});
console.log('用户点击确定拨打电话')
} else {
console.log('用户点击取消拨打电话')
}
}
});
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
// app.getUserInfo(function (userInfo) {
// //更新数据
// that.setData({
// userInfo: userInfo
// })
// })
}
})
linkBook.wxml
<!-- 引入自定义函数 -->
<wxs module="filters" src="toInt.wxs"></wxs>
<view class="container">
<!-- view容器嵌套, 可设置多页翻滚效果 -->
<view>
<block wx:for="{{linkBookData}}" wx:for-index="i" wx:for-item="item_i" wx:for-key="key_i">
<view class="service-title">
{{item_i.name}}:
</view>
<!-- 每行展示三个,只有两种情况:
1-刚好是3的倍数,这种情况直接使用结果循环
2-不是三的倍数, 这种情况需要对结果取整数,然后+1
0 1 2
3 4 5
6 7 8
以上为child坐标数据,最里面循环值始item_k终为0 1 2 第二层循环值item_j为: 0 1 2 3 4 5 6...
从中可以发现规律:坐标数据 = item_j * 3 + item_k
-->
<block wx:for="{{item_i.child.length % 3 == 0 ? item_i.child.length/3 : filters.toFix(item_i.child.length/3) + 1}}" wx:for-index="j" wx:for-item="item_j" wx:for-key="key_j">
<view class="services">
<!-- 固定每行只展示三条记录数 -->
<block wx:for="{{3}}" wx:for-index="k" wx:for-item="item_k" wx:for-key="key_k">
<view>
<!-- 如果没有图片属性,则默认当前模块不可用! -->
<image bindtap="phone" data-tel="{{item_i.child[item_j * 3 + item_k].tel}}" src="{{item_i.child[item_j * 3 + item_k].img}}"
wx:if="{{item_i.child[item_j * 3 + item_k].img != null}}"></image>
<text>{{item_i.child[item_j * 3 + item_k].name}}</text>
</view>
</block>
</view>
</block>
</block>
</view>
</view>
linkBook.wxss
/**index.wxss**/
page{
background: #f9f9f9;
}
.container{
padding: 32rpx;
height: 100%
}
.service-title{
padding: 32rpx 0 0 48rpx;
font-size: 38rpx;
}
.services{
display: flex;
display: -webkit-flex;
box-sizing: border-box;
}
.services view{
box-sizing: border-box;
/* border: 1rpx solid #ccc; */
flex: 1;
-webkit-flex: 1;
/*background: #f1f1f1;*/
text-align: center;
padding: 32rpx 0;
}
.services view image{
width: 120rpx;
height: 120rpx;
}
.services view text{
display: block;
}
toInt.wxs
var filters = {
toFix: function (value) {
//return value.toFixed(2)//此处2为保留两位小数
return parseInt(value); //此处为获取整数,不进行四舍五入操作
}
}
module.exports = {
toFix: filters.toFix
}