微信小程序,好看点的列表 实例
时间: 2024-10-09 07:04:35 浏览: 19
微信小程序中的美观列表实例通常涉及到WXML(WeiXin Markup Language,微信小程序的模板语言)和WXSS(WeiXin CSS,小程序的样式表)的结合使用,以及数据绑定和组件化设计。下面是一个简单的例子:
```html
<!-- views/wxlist.wxml -->
<view class="list-container">
<block wx:for="{{items}}" wx:key="*this">
<!-- 使用 wx:if 判断是否显示星标 -->
<view wx:if="{{item.isStarred}}">
<image src="/images/star.png" class="star"/>
</view>
<view class="list-item">
<text>{{item.title}}</text>
<text class="author">作者:{{item.author}}</text>
<button bindtap="onItemClick">查看详情</button>
</view>
</block>
</view>
```
```css
/* styles/list.wxss */
.list-container {
padding: 10px;
}
.list-item {
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.star {
width: 15px;
height: 15px;
}
```
在这个例子中,`items` 是从服务器或本地获取的数据数组,通过 `wx:for` 循环渲染每个列表项。每个列表项包括标题、作者信息和一个点击事件处理函数(`onItemClick`)。星标部分使用了条件渲染 (`wx:if`),只有当 `isStarred` 属性为 true 时才显示。
为了实现实体应用,你需要在相应的 JavaScript 文件(如 `pages/index.js`)中设置数据、事件处理器和接口调用:
```javascript
// pages/index.js
Page({
data: {
items: [], // 初始化数据为空
},
onLoad() {
// 加载数据并填充到 items 数组
this.getNewsList();
},
getNewsList() {
// 示例,实际应替换为你的 API 调用
const res = [
{ title: '新闻1', author: '作者1', isStarred: false },
{ ... }
];
this.setData({ items: res });
},
onItemClick(e) {
console.log('点击了第', e.detail.index, '条新闻');
}
})
```
阅读全文