热门

最新

红包

立Flag

投票

同城

发布
weixin_53051713
油麦菜你好
4 年前
trueweixin_53051713

小程序P103 09.首页-实现分类导航区域（接上一个）
3、点击第一项，切换到分类页面
①为 nav-item 绑定点击事件处理函数：

<!-- 分类导航区域 -->
<view class="nav-list">
<view class="nav-item" v-for="(item, i) in navList" :key="i" @undefined
<image :src="item.image_src" class="nav-img"></image>
</view>
</view>

②定义 navClickHandler 事件处理函数：

// nav-item 项被点击时候的事件处理函数
navClickHandler(item) {
// 判断点击的是哪个 nav
if (item.name === '分类') {
uni.switchTab({
url: '/pages/cate/cate'
})
}
}

评论
1
打赏
  • 复制链接
  • 举报
下一条：
小程序P103 09.首页-实现分类导航区域1、 获取分类导航的数据①定义 data 数据②在 onLoad 中调用获取数据的方法③在 methods 中定义获取数据的方法示例代码如下：export default { data() { return { // 1. 分类导航的数据列表 navList: [], } }, onLoad() { // 2. 在 onLoad 中调用获取数据的方法 this.getNavList() }, methods: { // 3. 在 methods 中定义获取数据的方法 async getNavList() { const { data: res } = await uni.$http.get('/api/public/v1/home/catitems') if (res.meta.status !== 200) return uni.$showMsg() this.navList = res.message }, },}2、渲染分类导航的 UI 结构<!-- 分类导航区域 --><view class="nav-list"> <view class="nav-item" v-for="(item, i) in navList" :key="i"> <image :src="item.image_src" class="nav-img"></image> </view></view>通过如下的样式美化页面结构：.nav-list { display: flex; justify-content: space-around; margin: 15px 0; .nav-img { width: 128rpx; height: 140rpx; }}