在微信小程序开发过程中，常常会遇到循环数据一说，自己看了点，写了个demo体验下小程序的魅力
//音频数组
Page({
data: {
items: [
//第一首
{
name:
'I Am You'
,
author:
'Kim Taylor'
,
poster:
'http://xxx.xxx.xxx.xxx:8080/images/music/20171122164628.jpg'
,
src:
'http://xxx.xxx.xxx.xxx:8080/images/music/Kim Taylor - I Am You.mp3'
,
action:
'pause'
,
},
//第二首
{
name:
'Just As I Am'
,
author:
'Air Supply'
,
poster:
'http://xxx.xxx.xxx.xxx:8080/images/music/742008777.jpg'
,
src:
'http://xxx.xxx.xxx.xxx:8080/images/music/Air Supply - Just As I Am - Digitally Remastered 1999.mp3'
,
action:
'pause'
,
},
//第三首
{
name:
'追梦人'
,
author:
'群星-轻音乐'
,
poster:
'http://xxx.xxx.xxx.xxx:8080/images/music/210136823.jpg'
,
src:
'http://xxx.xxx.xxx.xxx:8080/images/music/群星 - 追梦人.mp3'
,
action:
'pause'
,
},
//第肆首
{
name:
'七月上'
,
author:
'Jam'
,
poster:
'http://xxx.xxx.xxx.xxx:8080/images/music/1589703900.jpg'
,
src:
'http://xxx.xxx.xxx.xxx/images/music/Jam - 七月上.mp3'
,
action:
'pause'
,
},
//第伍首
{
name:
'世界が终わるまでは…'
,
author:
'WANDS'
,
poster:
'http://xxx.xxx.xxx.xxx:8080/images/music/933843024.jpg'
,
src:
'http://xxx.xxx.xxx.xxx:8080/images/music/WANDS - 世界が终わるまでは….mp3'
,
action:
'pause'
,
}
]
}
})
//展示部分
<
view
class
=
"page-section page-section-gap"
style
=
"text-align: center;"
wx:for
=
"{{items}}"
wx:for-index
=
"index"
wx:for-item
=
"item">
<
audio
style
=
"text-align: left"
src
=
"{{item.src}}"
poster
=
"{{item.poster}}"
author
=
"{{item.author}}"
name
=
"{{item.name}}"
action
=
"{{item.action}}"
controls
></
audio
>
</
view
>
上面展示方式，是写死在数组里，每次新增，修改，删除都要改动js文件。可以换一种方式，调用wx.request向服务端请求数据，然后使用
wx:for输出到页面中
附wx.request代码
wx.request({
url:
'http://xxx.xxx.xxx.xxx:8080/app/getJSONObject.json'
,
method:
'POST'
,
data: {},
header: {
'Accept'
:
'application/json'
},
success:
function
(res) {
console.log(res)
that.setData({
//填充数据
})
}
})