三国志14信息查询小程序（历史武将信息一览）制作更新过程03-主要页面的设计

2023-11-11 05:10
文章标签 设计 程序 查询 历史 页面 制作 14 03 主要 信息 一览 更新过程 三国志 武将

本文主要是介绍三国志14信息查询小程序（历史武将信息一览）制作更新过程03-主要页面的设计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1，小程序的默认显示

在这里插入图片描述
分为三部分，头部的标题、中间的内容区和底部的标签栏。点击标签可以切换不同页面，这是在app.json文件中配置的。代码如下：

//所有用到的页面都需要在 pages 数组中列出，否则小程序可能会出现错误或无法正确加载。
//首页的页面路径放在这个数组的第一个位置。例如，将 pages/index/index 设置为首页。
{"pages": ["pages/index/index","pages/details/details","pages/my/details","pages/about/about"],"subpackages": [],//标题文本设置"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#461311","navigationBarTitleText": "三国志14","navigationBarTextStyle": "white"},//标签，表示小程序的主要功能或页面，用户可以点击切换。"tabBar": {"color": "#bfc1ab","selectedColor": "#13b11c","backgroundColor": "#381B25","list": [{"pagePath": "pages/index/index","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "武将数据"},{"pagePath": "pages/my/details","iconPath": "image/icon_map.png","selectedIconPath": "image/icon_map_HL.png","text": "综合信息"},{"pagePath": "pages/about/about","iconPath": "image/icon_about.png","selectedIconPath": "image/icon_about_HL.png","text": "关于"}]},"sitemapLocation": "sitemap.json","permission": {"scope.userLocation": {"desc": "获取位置，方便按区域分配 "}}
}

2，武将信息页

在这里插入图片描述
分为三部分，查询工具栏、表头及数据列表
这是数据列表的代码：

 <!-- 数据列表 --><view wx:for="{{goodsList}}" wx:key="index" class="table"><view class="tr bg-g" bindtap="onGoodsDetail" data-all="{{item}}" data-name="{{item.name}}"><view class="td">{{item.name}}</view><view class="td">{{item.tongshuai}}</view><view class="td">{{item.wuli}}</view><view class="td">{{item.zhili}}</view><view class="td">{{item.zhengzhi}}</view><view class="td">{{item.meili}}</view></view></view>

可以看到，数据goodsList以循环的形式显示，每行数据上加入了点击事件onGoodsDetail，即跳转到人物详情页。
再看一下js里的方法：

（1）在页面加载时获取数据
 onLoad: function (options) {// 调用获取列表数据的方法this.getGoodsList(true)},
（2）获取数据方法：
  //获取列表数据并赋值给goodsListgetGoodsList(reachBottom) {...wx.request({url: url_get,//你的后台url地址data: {order: this.data.order,key: this.data.key,page: this.data.queryObj.pagenum,intPageSize: this.data.queryObj.pagesize,},header: {'content-type': 'application/x-www-form-urlencoded'},method: "GET",success(result) {if (reachBottom) {that.setData({goodsList: [...that.data.goodsList, ...result.data.response.data],total: result.data.response.dataCount,})}},fail(error) {console.log('request fail', error);},// 无论获取数据是否成功都会执行该方法complete: () => {wx.hideLoading() // 关闭loadingthis.setData({isLoading: false})}})}

查询，排序也是在改变条件后执行getGoodsList方法。

（3）稍微需要说明的是页面上拉获取数据的方法：
 /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {// 判断是否还有下一页数据if (this.data.queryObj.pagenum * this.data.queryObj.pagesize >= this.data.total) {wx.showLoading({title: '数据加载完毕！',})wx.hideLoading() // 关闭loadingreturn}// 判断是否正在请求其它数据，如果是，则不发起额外的请求if (this.data.isLoading) returnlet pagenum = this.data.queryObj.pagenumthis.setData({queryObj: {pagenum: pagenum += 1// 让页码值自增 +1}})this.getGoodsList(true)// 重新获取列表数据},
（4）及点击跳转到武将武将详情页的方法
 // 点击详情onGoodsDetail: function (e) {var name = e.currentTarget.dataset.namevar data = JSON.stringify(e.currentTarget.dataset)wx.navigateTo({url: '../details/details?name=' + name + '&data=' + data})},

3，综合信息页

在这里插入图片描述
这个页面没有什么好说的，一个个内容摆下来就是了，很多不知道放在哪里的东西都先放在这里了。
在这里插入图片描述
在这里插入图片描述

4，关于页

与综合信息页结构相同
在这里插入图片描述

5，人物详情页

在这里插入图片描述

（1）基本详情

在这里插入图片描述

（2）更多详情

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（3）评论评分

在这里插入图片描述
评论评分的页面代码：
wxml文件：

<!-- components/star-rating/star-rating.wxml -->
<view >
<!-- 人物总评分 --><view class="star-rating-center">{{initialName}}：<block wx:for="{{stars_total}}" wx:key="index"><text class="star {{item.selected ? 'selected' : ''}}" data-index="{{index}}">{{item.type}}</text></block>[{{goal}}分]
</view>
<!-- 评分&评论 --><view class="reviews-container"><block wx:for="{{ratingsAndComments}}" wx:key="index" ><view class="single-review"><!-- 这里添加显示单个评分的代码 --><view class="star-container"><block wx:for="{{item.stars}}" wx:key="index"><text class="star {{item.selected ? 'selected' : ''}}" data-index="{{index}}">{{item.type}}</text></block><!-- <view style=" justify-content: center;align-items: center;margin-left;20rpx;margin-top:15rpx">{{item.createTime}}</view> --></view><!-- 评论 --><text class="comment">{{item.comment}}</text></view></block></view>
</view>
<!-- 评分提交 -->
<view class="rating-editor"><!-- 评分 -->
<view class="flex-container"><text class="label">评分：</text><view class="star-container-editor"><block wx:for="{{stars}}" wx:key="index"><text class="star {{item.selected ? 'selected' : ''}}" bindtap="onStarClick" data-index="{{index}}">{{item.type}}</text></block></view>
</view><!-- 评论 -->
<view class="flex-container"><text class="label">评论：</text><view class="textarea-container"><textarea style="height:100rpx" type="text" name="biography" value="{{biography}}" placeholder="" maxlength="5000" bindinput="onTextareaInput"></textarea></view>
</view><button class="submit-button" bindtap="onSubmitRating">提交评分</button>
</view>

js文件：

// components/star-rating/star-rating.js
import { BASE_URL2 } from '../../component/config.js';
Component({properties: {// 初始星级initialRating: {type: Number,value: 0},initialId: {type: String,value: ''},lastClickedTime:0,initialName: {type: String,value: ''},},data: {stars: [],stars_total: [],goal: '暂无评',name: '',ratingsAndComments: [],biography: ''},observers: {'initialRating': function (newVal) {this.setStars(newVal);},},lifetimes: {attached() {// 在组件实例进入页面节点树时执行console.log('组件实例进入页面节点树');},ready() {var that = thislet id = this.data.initialId// 在组件在视图层布局完成后执行wx.request({url: BASE_URL2 + 'GetAllGoal',  //你的后台url地址data: {key: id},header: {'content-type': 'application/x-www-form-urlencoded'},method: "GET",success(result) {let dataList = result.data.response;let num = 0;if (dataList.length > 0) {for (let i = 0; i < dataList.length; i++) {let stars = [];num += dataList[i].goalfor (let j = 1; j <= 5; j++) {stars.push({type: j <= dataList[i].goal ? '★' : '☆',selected: j <= dataList[i].goal});}const currentRatingsAndComments = that.data.ratingsAndComments;that.data.ratingsAndComments.push({stars: stars,createTime: dataList[i].createTime,comment: dataList[i].comment})// 更新数组中特定元素的值currentRatingsAndComments[i].stars = stars;currentRatingsAndComments[i].comment = dataList[i].comment != null ? dataList[i].comment : ""// 使用 setData 更新数据并重新渲染that.setData({ratingsAndComments: currentRatingsAndComments});}num = num / dataList.length//人物评星let star = [];for (let j = 1; j <= 5; j++) {star.push({type: j <= num ? '★' : '☆',selected: j <= num});}//人物得分num = parseFloat(num.toFixed(2));console.log(num)that.setData({stars_total: star,goal: num})}},fail(error) {console.log('request fail', error);},})},},methods: {//评分显示setStars(rating) {let stars = [];for (let i = 1; i <= 5; i++) {stars.push({type: i <= rating ? '★' : '☆',selected: i <= rating});}this.setData({ stars });},//修改评分onStarClick(e) {const index = e.currentTarget.dataset.index;const rating = index + 1;this.setStars(rating);this.triggerEvent('ratingChanged', { rating });},//评论onTextareaInput: function (e) {this.setData({biography: e.detail.value});},//提交评分onSubmitRating() {var that = thislet goal = 0;for (let i = 0; i < 5; i++) {if (this.data.stars[i].selected) {goal += 1}}wx.showModal({title: '确认提交', // 确认框标题content: '您确定要提交吗？', // 确认框内容success(res) {const now = new Date().getTime();if (now - that.data.lastClickedTime < 5000) { // 5秒内不允许重复点击wx.showToast({title: '操作过于频繁',icon: 'none'});return;}if (res.confirm) { // 用户点击了确定按钮wx.request({url: BASE_URL2 + 'PostGoal',//你的后台url地址data: {Id: that.data.initialId,goal: goal,comment: that.data.biography,},header: {'content-type': 'application/x-www-form-urlencoded'},method: "GET",success(result) {that.setStars(5);that.setData({ratingsAndComments: [],biography: "",lastClickedTime:now});let id = that.data.initialId// 在组件在视图层布局完成后执行wx.request({url: BASE_URL2 + 'GetAllGoal',//你的后台url地址data: {key: id},header: {'content-type': 'application/x-www-form-urlencoded'},method: "GET",success(result) {let dataList = result.data.response;let num = 0;if (dataList.length > 0) {for (let i = 0; i < dataList.length; i++) {let stars = [];num += dataList[i].goalfor (let j = 1; j <= 5; j++) {stars.push({type: j <= dataList[i].goal ? '★' : '☆',selected: j <= dataList[i].goal});}const currentRatingsAndComments = that.data.ratingsAndComments;that.data.ratingsAndComments.push({stars: stars,createTime: dataList[i].createTime,comment: dataList[i].comment})// 更新数组中特定元素的值currentRatingsAndComments[i].stars = stars;currentRatingsAndComments[i].comment = dataList[i].comment != null ? dataList[i].comment : ""// 使用 setData 更新数据并重新渲染that.setData({ratingsAndComments: currentRatingsAndComments});}num = num / dataList.length//人物评星let star = [];for (let j = 1; j <= 5; j++) {star.push({type: j <= num ? '★' : '☆',selected: j <= num});}//人物得分num = parseFloat(num.toFixed(2));that.setData({stars_total: star,goal: num})}},fail(error) {console.log('request fail', error);},})}})} else if (res.cancel) {console.log('用户点击取消')}}})},}
})

css文件：

/* components/star-rating/star-rating.wxss */
.star-container {display: flex;
}.star {font-size: 32rpx;color: #ccc;margin-right: 8rpx;cursor: pointer;
}.star.selected {color: yellow;
}
/* 容纳所有评论的容器 */
.reviews-container {display: flex;flex-direction: column;
}/* 单个评论的容器 */
.single-review {display: flex;flex-direction: column;border-bottom: 1px solid #ccc; /* 添加边界分隔每个评论 */margin-bottom: 10rpx;padding: 10rpx;
}/* 星级评分的容器 */
.star-container {display: flex;margin-bottom: 5rpx;
}/* 星星的样式 */
.star {font-size: 50rpx;margin-right: 5rpx;
}.star.selected {color: gold;
}/* 评论文本的样式 */
.comment {font-size: 32rpx;color: #333;
}
/* 用于编辑和提交评分的固定容器 */
.rating-editor {position: fixed;bottom: 0;left: 0;right: 0;background-color: #fff;padding: 10rpx;border-top: 1px solid #ccc;z-index: 999;
}/* 评分编辑器的星级容器 */
.star-container-editor {display: flex;margin-bottom: 10rpx;align-items: center;justify-content: center;
}/* 提交按钮 */
.submit-button {padding: 10rpx;background-color: #007bff;color: white;border: none;border-radius: 4rpx;text-align: center;
}
.reviews-container {padding-bottom: 350rpx; /* 根据 .rating-editor 的高度来调整这个值 */
}
.star-rating-center {display: flex;justify-content: center;align-items: center;
}
.textarea-container {border: 1px solid #ccc; margin-bottom:15rpx;border-radius: 4px;padding: 5rpx;flex: 1; /* 增加 flex 属性 */
}/* 定义一个 flex 容器并垂直居中其内容 */
.flex-container {display: flex;align-items: center; /* 垂直居中 */
}/* 为“评分：”和“评论：”文本设置样式 */
.label {margin-right: 5px; /* 右侧外边距 */
}

6，自定义武将页

在这里插入图片描述
在这里插入图片描述

这篇关于三国志14信息查询小程序（历史武将信息一览）制作更新过程03-主要页面的设计的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/387747。

相关文章

不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
便携式气象仪器的主要特点

便携式气象仪器的主要特点

TH-BQX9】便携式气象仪器，也称为便携式气象仪或便携式自动气象站，是一款高度集成、低功耗、可快速安装、便于野外监测使用的高精度自动气象观测设备。以下是关于便携式气象仪器的详细介绍： 　　主要特点 　　高精度与多功能：便携式气象仪器能够采集多种气象参数，包括但不限于风速、风向、温度、湿度、气压等，部分高级型号还能监测雨量和辐射等。数据采集与存储：配备微电脑气象数据采集仪，具有实时时钟、数据存
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
业务中14个需要进行A/B测试的时刻[信息图]

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中，我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试，如何有效地规划和启动测试，如何评估测试是否成功，您应该关注哪些指标，多年来我们发现的常见错误等等。 什么是A/B测试？ A/B测试（有时称为“分割测试”）是一种实验类型，其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体，以查看哪一种效果最好。 本质上，A/B测
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...
怎么让1台电脑共享给7人同时流畅设计

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域，图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能，成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限，比如只有一台高性能电脑时，如何高效地让七人同时流畅地进行设计工作，便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器（CPU）：选择多核、高线程的处理器，例如Intel的至强系列或AMD的Ry
阅读更多...
cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈？ cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2