初始
This commit is contained in:
138
pages/index/index.js
Normal file
138
pages/index/index.js
Normal file
@@ -0,0 +1,138 @@
|
||||
// pages/index/index.js
|
||||
const { get } = require('../../utils/request');
|
||||
const { formatRelativeTime } = require('../../utils/util');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
searchValue: '',
|
||||
bannerList: [],
|
||||
categoryList: [],
|
||||
infoList: [],
|
||||
loading: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
hasMore: true
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.initData();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 初始化 TabBar 选中状态
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().init();
|
||||
}
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.initData().then(() => {
|
||||
wx.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.data.hasMore && !this.data.loading) {
|
||||
this.loadMoreInfo();
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化数据
|
||||
async initData() {
|
||||
this.setData({ page: 1, hasMore: true });
|
||||
|
||||
// 模拟数据 - 实际项目中替换为API调用
|
||||
this.setData({
|
||||
bannerList: [
|
||||
{ id: 1, image: '/assets/images/banner1.png', title: '热门资讯' },
|
||||
{ id: 2, image: '/assets/images/banner2.png', title: '最新动态' }
|
||||
],
|
||||
categoryList: [
|
||||
{ id: 1, name: '科技', icon: 'technology' },
|
||||
{ id: 2, name: '财经', icon: 'finance' },
|
||||
{ id: 3, name: '教育', icon: 'education' },
|
||||
{ id: 4, name: '健康', icon: 'health' },
|
||||
{ id: 5, name: '生活', icon: 'life' },
|
||||
{ id: 6, name: '娱乐', icon: 'entertainment' },
|
||||
{ id: 7, name: '体育', icon: 'sports' },
|
||||
{ id: 8, name: '更多', icon: 'more' }
|
||||
],
|
||||
infoList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '这是一条测试信息标题，展示信息服务的基本样式',
|
||||
summary: '这是信息摘要内容，用于展示信息的简要描述...',
|
||||
image: '/assets/images/info1.png',
|
||||
category: '科技',
|
||||
time: new Date().getTime() - 3600000,
|
||||
views: 1234
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '第二条信息标题，这里是标题内容展示',
|
||||
summary: '这是第二条信息的摘要内容...',
|
||||
image: '/assets/images/info2.png',
|
||||
category: '财经',
|
||||
time: new Date().getTime() - 7200000,
|
||||
views: 856
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
|
||||
// 加载更多信息
|
||||
async loadMoreInfo() {
|
||||
if (this.data.loading) return;
|
||||
|
||||
this.setData({ loading: true });
|
||||
|
||||
// 模拟加载更多
|
||||
setTimeout(() => {
|
||||
const newPage = this.data.page + 1;
|
||||
// 模拟无更多数据
|
||||
if (newPage > 3) {
|
||||
this.setData({ hasMore: false, loading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
page: newPage,
|
||||
loading: false
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 搜索
|
||||
onSearch(e) {
|
||||
const value = e.detail;
|
||||
wx.navigateTo({
|
||||
url: `/pages/search/search?keyword=${value}`
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索值变化
|
||||
onSearchChange(e) {
|
||||
this.setData({ searchValue: e.detail });
|
||||
},
|
||||
|
||||
// 点击分类
|
||||
onCategoryTap(e) {
|
||||
const { id, name } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/category/category?id=${id}&name=${name}`
|
||||
});
|
||||
},
|
||||
|
||||
// 点击信息
|
||||
onInfoTap(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/detail/detail?id=${id}`
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime(time) {
|
||||
return formatRelativeTime(time);
|
||||
}
|
||||
});
|
||||
5
pages/index/index.json
Normal file
5
pages/index/index.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "首页",
|
||||
"enablePullDownRefresh": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
98
pages/index/index.wxml
Normal file
98
pages/index/index.wxml
Normal file
@@ -0,0 +1,98 @@
|
||||
<!--pages/index/index.wxml-->
|
||||
<view class="container">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<van-search
|
||||
value="{{ searchValue }}"
|
||||
placeholder="搜索信息"
|
||||
shape="round"
|
||||
bind:search="onSearch"
|
||||
bind:change="onSearchChange"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<view class="banner-section" wx:if="{{ bannerList.length > 0 }}">
|
||||
<swiper
|
||||
class="banner-swiper"
|
||||
indicator-dots
|
||||
autoplay
|
||||
circular
|
||||
interval="3000"
|
||||
>
|
||||
<swiper-item wx:for="{{ bannerList }}" wx:key="id">
|
||||
<image class="banner-image" src="{{ item.image }}" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 分类入口 -->
|
||||
<view class="category-section card">
|
||||
<view class="category-grid">
|
||||
<view
|
||||
class="category-item"
|
||||
wx:for="{{ categoryList }}"
|
||||
wx:key="id"
|
||||
data-id="{{ item.id }}"
|
||||
data-name="{{ item.name }}"
|
||||
bindtap="onCategoryTap"
|
||||
>
|
||||
<view class="category-icon">
|
||||
<van-icon name="apps-o" size="48rpx" color="#1890ff" />
|
||||
</view>
|
||||
<text class="category-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 信息列表 -->
|
||||
<view class="info-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">最新资讯</text>
|
||||
</view>
|
||||
|
||||
<view class="info-list">
|
||||
<view
|
||||
class="info-item card"
|
||||
wx:for="{{ infoList }}"
|
||||
wx:key="id"
|
||||
data-id="{{ item.id }}"
|
||||
bindtap="onInfoTap"
|
||||
>
|
||||
<view class="info-content">
|
||||
<view class="info-text">
|
||||
<text class="info-title ellipsis-2">{{ item.title }}</text>
|
||||
<text class="info-summary ellipsis-2">{{ item.summary }}</text>
|
||||
<view class="info-meta">
|
||||
<van-tag plain type="primary" size="medium">{{ item.category }}</van-tag>
|
||||
<text class="info-time">{{ item.timeText }}</text>
|
||||
<text class="info-views">{{ item.views }}阅读</text>
|
||||
</view>
|
||||
</view>
|
||||
<van-image
|
||||
wx:if="{{ item.image }}"
|
||||
class="info-image"
|
||||
width="180rpx"
|
||||
height="120rpx"
|
||||
fit="cover"
|
||||
radius="8rpx"
|
||||
src="{{ item.image }}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-section" wx:if="{{ loading }}">
|
||||
<van-loading size="24px">加载中...</van-loading>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多 -->
|
||||
<view class="no-more" wx:if="{{ !hasMore && infoList.length > 0 }}">
|
||||
<text>— 没有更多了 —</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<van-empty wx:if="{{ !loading && infoList.length === 0 }}" description="暂无信息" />
|
||||
</view>
|
||||
</view>
|
||||
145
pages/index/index.wxss
Normal file
145
pages/index/index.wxss
Normal file
@@ -0,0 +1,145 @@
|
||||
/* pages/index/index.wxss */
|
||||
|
||||
.container {
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
.banner-section {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.banner-swiper {
|
||||
height: 300rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 分类 */
|
||||
.category-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e6f7ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 信息列表 */
|
||||
.info-section {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.info-summary {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.info-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.info-views {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user