写一个微信小程序图书分类列表代码
时间: 2024-04-08 16:33:15 浏览: 161
微信小程序书籍
5星 · 资源好评率100%
当然可以!以下是一个简单的微信小程序图书分类列表的示例代码:
```javascript
// pages/bookList/bookList.js
Page({
data: {
categories: [
{ id: 1, name: '文学' },
{ id: 2, name: '历史' },
{ id: 3, name: '科幻' },
{ id: 4, name: '自助' },
{ id: 5, name: '经济' }
]
},
// 点击分类跳转到对应的图书列表页
navigateToBookList(event) {
const categoryId = event.currentTarget.dataset.categoryId;
wx.navigateTo({
url: `/pages/bookList/bookList?categoryId=${categoryId}`
});
}
});
```
```html
<!-- pages/bookList/bookList.wxml -->
<view class="category-list">
<block wx:for="{{categories}}" wx:key="id">
<view class="category-item" bindtap="navigateToBookList" data-category-id="{{item.id}}">
{{item.name}}
</view>
</block>
</view>
```
在上述代码中,我们在 `bookList.js` 文件中定义了一个 `categories` 数组,其中包含了图书的不同分类。然后,在 `bookList.wxml` 文件中通过 `wx:for` 循环遍历这个数组,并渲染出分类列表。每个分类都绑定了 `navigateToBookList` 方法,在点击时触发跳转到对应的图书列表页,并传递了相应的分类ID。
这只是一个简单的示例代码,你可以根据自己的需求进行修改和优化。希望对你有所帮助!
阅读全文