微信小程式動態實現小選單
阿新 • • 發佈:2018-12-13
微信小程式動態實現上圖所示小選單:
設定選單資料來源:
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; }