版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SunshineBlog/article/details/83003493
微信小程序动态实现上图所示小菜单:
设置菜单数据源:
Page({
/**
* 页面的初始数据
*/
data: {
menuList: [
[{
name: '菜单1',
url: '../navigateTo/navigateTo',
content: '我是菜单一'
},
{
name: '菜单2',
url: '../logs/logs',
content: '我是菜单二'
},
{
name: '菜单3',
url: '../movie/movie',
content: '我是菜单三'
},
{
name: '菜单4',
url: '../userinfo/userinfo',
content: '我是菜单四'
}
],
[{
name: '菜单5',
url: '121',
content: '我是菜单五'
},
{
name: '菜单6',
url: '121',
content: '我是菜单六'
},
{
name: '菜单7',
url: '121',
content: '我是菜单七'
},
{
name: '菜单8',
url: '121',
content: '我是菜单八'
}
],
]
}
})
微信小程序wxml页面:
<view class='content' wx:for='{{menuList}}' wx:for-index="parentIndex">
<view class='item' data-parentIndex='{{parentIndex}}' data-index='{{index}}' wx:for='{{item}}' bindtap='muenSubClick' data-introduce='{{sub}}' wx:for-item='sub'>{{sub.name}}</view>
</view>
微信小程序wxss页面:
.content {
display: flex; /*显示方式为flex*/
flex-direction: row; /*布局方式为水平*/
justify-content: space-around; /*位置平分*/
margin-top: 25rpx;
}
.item {
width: 100rpx;
height: 100rpx;
background-color: skyblue;
border-radius: 50%; /*圆角*/
text-align: center;
line-height: 100rpx;
font-family: 宋体;
font-size: 35rpx;
}