1. 概述

1.1 说明

在微信开发者工具环境下开发一个简易的TodoList功能,以便能够进行学习与熟练小程序相关功能与信息.。

示例中,初步计划包含以下功能:

    • 1.能够进行新增计划信息
    • 2.计划信息可分为已完成与未完成两种状态信息
    • 3.数据信息可列表显示
    • 4.可以对列表中数据进行标记完成与删除操作
    • 5.可进行分页操作(此处仅为一数据示例)

  备注:目前数据未进行缓存处理,仅为数据操作展示。

1.2 图例

   

1.3 图例说明

  1.3.1 列表

  使用三个状态分别控制不同的列表信息,点击不同的状态加载不同的数据:

    • 全部 -- 所有的数据信息都加载至此状态对应列表
    • 已完成 -- 所有已完成状态的数据信息列表
    • 未完成 -- 所有未完成状态的数据信息列表

  1.3.2 新增

  点击列表上的添加按钮显示出新增内容区域,新增内容有确定添加和取消两种功能:

    • 确定添加 -- 把输入至文本框中的内容添加至列表中,状态为未完成,添加完成后关闭新增内容区域
    • 取消 -- 直接关闭新增内容区域

  1.3.3 滑动操作

  点击到某一数据信息,向左进行滑动显示出来对应的操作按钮(删除或标记完成),使用position进行控制相关显示信息;

  设计原理:内容信息与按钮在同一行显示,使用z-index控制堆叠.按钮的z-index小于内容的z-index.

    • 未完成 -- 滑动后显示出删除按钮与标记完成按钮,此时的最大滑动宽度为删除按钮与标记按钮之和
    • 已完成 -- 滑动后显示出删除按钮,此时的最大滑动宽度为删除按钮的宽度.

  1.3.4 按钮操作

    • 删除 -- 列表中删除对应的数据行
    • 标记完成 -- 列表中对应行数据的状态由未完成更改为完成.

1.4 代码结构

2. 代码

  码云: https://gitee.com/ajuanK/wxSimpleTodoList.git

2.1 页面设计(index.wxml)

  1. <!--index.wxml-->
  2. <wxs src="./../../wxs/subString.wxs" module="tools"/>
  3. <view class="container">
  4. <view class="userinfo">
  5. <view class="addDiv {{addShow?'':'hide'}}">
  6. <view class="addDivContent">
  7. <input bindinput='bindAddText' placeholder="请输入内容" focus="{{inputFocus}}" value="{{addText}}" class="addDivInput" />
  8. <view class="addDivButton">
  9. <button class="addDivButtonMargin" bindtap="addTodo" type="primary" size="mini">确定添加</button>
  10. <button bindtap="cancelTodo" type="default" size="mini">取消</button>
  11. </view>
  12. </view>
  13. </view>
  14. <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
  15. <block wx:else>
  16. <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
  17. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  18. </block>
  19. <view class="listDivTop">
  20. <view class="listDivType">
  21. <view class="{{(todoTabId=='tab1'?'listDivTypeSelected':'')}}" data-id="tab1" bindtap="onChangeSelect">全部</view>
  22. <view class="{{(todoTabId=='tab2'?'listDivTypeSelected':'')}}" data-id="tab2" bindtap="onChangeSelect">已完成</view>
  23. <view class="{{(todoTabId=='tab3'?'listDivTypeSelected':'')}}" data-id="tab3" bindtap="onChangeSelect">未完成</view>
  24. </view>
  25. <view>
  26. <button type="primary" size="mini" bindtap="addDivShow">添加</button>
  27. </view>
  28. </view>
  29. <view class="listDivContent">
  30. <view class="items">
  31. <view wx:for="{{todoDtBind}}" wx:key="{{index}}" class="listDivItem">
  32. <view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" data-state="{{item.state}}" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt">
  33. <view class="listDivRow">
  34. <view>{{index+1}}.{{tools.sub(item.content)}}</view>
  35. <view class="itemTime">{{item.addTime}}</view>
  36. </view>
  37.  
  38. </view>
  39. <view wx:if="{{item.state==2}}" data-index="{{index}}" bindtap="finishItem" class="inner finish">标记完成</view>
  40. <view data-index="{{index}}" bindtap="delItem" class="inner del">删除</view>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </view>

2.2 逻辑处理

2.2.1 页面逻辑处理(index.js)

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6. data: {
  7. addShow: false, //添加输入面板是否显示
  8. inputFocus: false,//是否选中
  9. addText: '',//新增内容
  10. todoTabId: 'tab1',//tab选中
  11. totalCount: 70,//总数据
  12. pageSize: 20,//显示行数
  13. pageNum: 1,//页码
  14. todoDtBind: [],//绑定的数据集合
  15. todoList: [],//数据集合(所有的)
  16. delBtnWidth: 60, //删除按钮宽度
  17. finishBtnWidth: 80, //删除按钮宽度
  18. startX: "", //触摸开始滑动的位置
  19. userInfo: {},
  20. hasUserInfo: false,
  21. canIUse: wx.canIUse('button.open-type.getUserInfo')
  22. },
  23. //事件处理函数
  24. bindViewTap: function() {
  25. wx.navigateTo({
  26. url: '../logs/logs'
  27. })
  28. },
  29. onShow: function() {
  30. this.setData({
  31. pageNum: 1
  32. })
  33. this.getBindDtInfo("正在加载中");
  34. this.setBindDtInfo(this.data.todoTabId);
  35. },
  36. /**
  37. * 获取绑定数据
  38. * @param msg:加载信息
  39. */
  40. getBindDtInfo: function(msg) {
  41. wx.showLoading({
  42. title: msg,
  43. })
  44. setTimeout(function() {
  45. wx.hideLoading()
  46. }, 2000)
  47. var vNum = this.data.pageNum;
  48. var count = vNum * this.data.pageSize;//页码乘以行数得到的理论条数
  49. var showCount = 0;//显示条数
  50. if (count <= this.data.totalCount) {
  51. showCount = count;
  52. } else {
  53. showCount = this.data.totalCount;
  54. vNum = vNum - 1;
  55. }
  56. let objItem = {};
  57. let dtInfo = [];//创造数据
  58. for (var i = 0; i < showCount; i++) {
  59. objItem = {
  60. id: i + 1,
  61. content: '计划工作项目' + (i + 1).toString(),
  62. addTime: this.getStrDate(Date.parse(new Date()) / 1000),
  63. state: (i < 6) ? 2 : 1,//前6行显示为未完成
  64. txtStyle: ''
  65. }
  66. dtInfo.push(objItem)
  67. }
  68. this.setData({
  69. todoList: dtInfo,
  70. pageNum: vNum
  71. });
  72. },
  73. /**
  74. * 页面上拉触底事件
  75. */
  76. onReachBottom: function() {
  77. if (this.data.todoList.length <= this.data.totalCount) {
  78. let vNum = this.data.pageNum + 1;
  79. this.setData({
  80. pageNum: vNum
  81. })
  82. this.getBindDtInfo("正在加载中");
  83. this.setBindDtInfo(this.data.todoTabId);
  84. } else {
  85. wx.showToast({
  86. title: '没有更多数据',
  87. icon: 'none',
  88. duration: 2000
  89. })
  90. }
  91. },
  92. /**
  93. * 通过时间戳获取时间表达式
  94. */
  95. getStrDate: function(vTime) {
  96. var res = /^\d+$/;
  97. if (!res.test(vTime)) {
  98. return vTime;
  99. }
  100. var date = new Date(vTime * 1000);
  101. var Y = date.getFullYear(); //年
  102. var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月
  103. var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); //日
  104. var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); //时
  105. var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); //分
  106. var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); //秒
  107. var strDate = Y + "/" + M + "/" + D + " " + h + ":" + m + ":" + s;
  108. return strDate;
  109. },
  110. /**
  111. * 添加按钮事件
  112. */
  113. addDivShow: function() {
  114. this.setData({
  115. addShow: true,
  116. inputFocus: true
  117. });
  118. },
  119. //输入内容绑定至数据
  120. bindAddText: function(e) {
  121. this.setData({
  122. addText: e.detail.value
  123. })
  124. },
  125. //确定新增按钮事件
  126. addTodo: function() {
  127. var content = this.data.addText;
  128. if (content.trim() == "") {
  129. wx.showToast({
  130. title: '添加的内容信息不能为空!',
  131. icon: 'none',
  132. duration: 2000
  133. })
  134. return;
  135. }
  136. var dtInfo = this.data.todoList;
  137. var objAdd = {
  138. id: dtInfo.length + 1,
  139. content: content,
  140. addTime: this.getStrDate(Date.parse(new Date()) / 1000),
  141. state: 2,
  142. txtStyle: ''
  143. }
  144. dtInfo.unshift(objAdd);
  145. var count = this.data.totalCount + 1;
  146. this.setData({
  147. todoList: dtInfo,
  148. totalCount: count,
  149. addShow: false,
  150. inputFocus: false,
  151. addText: ''
  152. });
  153. this.setBindDtInfo(this.data.todoTabId)
  154. },
  155. //取消按钮事件
  156. cancelTodo: function() {
  157. this.setData({
  158. addShow: false,
  159. inputFocus: false,
  160. addText: ''
  161. });
  162. },
  163. //设置绑定数据集合
  164. setBindDtInfo: function(vTabId) {
  165. var dtInfo = [];
  166. if (vTabId == "tab1") {
  167. dtInfo = this.data.todoList;
  168. } else if (vTabId == "tab2") {
  169. for (var i = 0; i < this.data.todoList.length; i++) {
  170. if (this.data.todoList[i].state == 1) {
  171. dtInfo.push(this.data.todoList[i]);
  172. }
  173. }
  174. } else {
  175. for (var i = 0; i < this.data.todoList.length; i++) {
  176. if (this.data.todoList[i].state == 2) {
  177. dtInfo.push(this.data.todoList[i]);
  178. }
  179. }
  180. }
  181. this.setData({
  182. todoDtBind: dtInfo,
  183. todoTabId: vTabId
  184. });
  185. },
  186. /**
  187. * 类型选中事件(全部,已完成,未完成)
  188. */
  189. onChangeSelect: function(e) {
  190. var dtInfo = this.data.todoList;
  191. dtInfo.forEach(function(item) {
  192. item.txtStyle = "";
  193. })
  194. var self = this;
  195. var id = e.currentTarget.dataset.id;
  196. this.setBindDtInfo(id);
  197. },
  198. // 滑动开始
  199. touchStart: function(e) {
  200. var dtInfo = this.data.todoDtBind;
  201. dtInfo.forEach(function(item) {
  202. item.txtStyle = "";
  203. })
  204. if (e.touches.length == 1) {
  205. this.setData({
  206. //设置触摸起始点水平方向位置
  207. startX: e.touches[0].clientX,
  208. todoDtBind: dtInfo
  209. });
  210. }
  211. },
  212. //滑动
  213. touchMove: function(e) {
  214. if (e.touches.length == 1) {
  215. //移动时水平方向位置
  216. var moveX = e.touches[0].clientX;
  217. var dValueX = this.data.startX - moveX; //差值:手指点击开始的X坐标位置减去移动的水平位置坐标
  218. var operBtnWidth = this.data.delBtnWidth;
  219. var state = e.currentTarget.dataset.state;
  220. if (state == 2) {
  221. operBtnWidth = this.data.delBtnWidth + this.data.finishBtnWidth;
  222. }
  223. var txtStyle = "";
  224. //没有移动或者向右滑动不进行处理
  225. if (dValueX == 0 || dValueX < 0) {
  226. txtStyle = "left:0px";
  227. } else {
  228. txtStyle = "left:-" + dValueX + "px";
  229. }
  230. if (dValueX >= operBtnWidth) {
  231. //文本移动的最大距离
  232. txtStyle = "left:-" + operBtnWidth + "px";
  233. }
  234. var index = e.currentTarget.dataset.index;
  235. var dtInfo = this.data.todoDtBind;
  236. dtInfo[index].txtStyle = txtStyle;
  237. this.setData({
  238. todoDtBind: dtInfo
  239. })
  240. }
  241. },
  242. //滑动结束
  243. touchEnd: function(e) {
  244. if (e.changedTouches.length == 1) {
  245. var endX = e.changedTouches[0].clientX;
  246. var dValueX = this.data.startX - endX;
  247. var operBtnWidth = this.data.delBtnWidth;
  248. var state = e.currentTarget.dataset.state;
  249. if (state == 2) {
  250. operBtnWidth = this.data.delBtnWidth + this.data.finishBtnWidth;
  251. }
  252. var txtStyle = ""
  253. if (dValueX > operBtnWidth / 2) {
  254. txtStyle = "left:-" + operBtnWidth + "px";
  255. } else {
  256. txtStyle = "left:0px"
  257. }
  258. var index = e.currentTarget.dataset.index;
  259. var dtInfo = this.data.todoDtBind;
  260. dtInfo[index].txtStyle = txtStyle;
  261. this.setData({
  262. todoDtBind: dtInfo
  263. })
  264. }
  265. },
  266. //标记完成
  267. finishItem: function(e) {
  268. var index = e.currentTarget.dataset.index;
  269. var dtInfo = this.data.todoDtBind;
  270. dtInfo[index].state = 1;
  271. dtInfo[index].txtStyle = "left:0px";
  272. this.setData({
  273. todoDtBind: dtInfo
  274. })
  275. this.setBindDtInfo(this.data.todoTabId);
  276. wx.showToast({
  277. title: '已完成成功',
  278. icon: 'success',
  279. duration: 2000
  280. })
  281. },
  282. //删除按钮事件
  283. delItem: function(e) {
  284. var index = e.currentTarget.dataset.index;
  285. var dtInfo = this.data.todoDtBind;
  286. var dtInfoList = this.data.todoList;
  287. var removeIndex = -1;
  288. for (var i = 0; i < dtInfoList.length; i++) {
  289. if (dtInfoList[i].id == dtInfo[index].id) {
  290. removeIndex = i;
  291. }
  292. }
  293. dtInfoList.splice(removeIndex, 1);
  294. var count = this.data.totalCount - 1;
  295. this.setData({
  296. todoList: dtInfoList,
  297. totalCount: count
  298. })
  299. this.setBindDtInfo(this.data.todoTabId);
  300. wx.showToast({
  301. title: '删除成功',
  302. icon: 'success',
  303. duration: 2000
  304. })
  305. },
  306. onLoad: function() {
  307.  
  308. if (app.globalData.userInfo) {
  309. this.setData({
  310. userInfo: app.globalData.userInfo,
  311. hasUserInfo: true
  312. })
  313. } else if (this.data.canIUse) {
  314. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  315. // 所以此处加入 callback 以防止这种情况
  316. app.userInfoReadyCallback = res => {
  317. this.setData({
  318. userInfo: res.userInfo,
  319. hasUserInfo: true
  320. })
  321. }
  322. } else {
  323. // 在没有 open-type=getUserInfo 版本的兼容处理
  324. wx.getUserInfo({
  325. success: res => {
  326. app.globalData.userInfo = res.userInfo
  327. this.setData({
  328. userInfo: res.userInfo,
  329. hasUserInfo: true
  330. })
  331. }
  332. })
  333. }
  334. },
  335. getUserInfo: function(e) {
  336. console.log(e)
  337. app.globalData.userInfo = e.detail.userInfo
  338. this.setData({
  339. userInfo: e.detail.userInfo,
  340. hasUserInfo: true
  341. })
  342. }
  343. })

2.2.2 小程序脚本语言(subString.wxs)

  1. var sub =function(val) {
  2. if (val == undefined || val.length == 0) {
  3. return;
  4. }
  5. if (val.length > 10) {
  6. return val.substring(0, 10) + "..."
  7. } else {
  8. return val;
  9. }
  10. }
  11.  
  12. module.exports={
  13. sub:sub
  14. }

2.3 样式设计(index.wxml)

  1. /**index.wxss**/
  2.  
  3. .userinfo {
  4. width: 100%;
  5. display: flex;
  6. flex-direction: column;
  7. align-items: center;
  8. position: relative;
  9. }
  10.  
  11. .userinfo-avatar {
  12. width: 128rpx;
  13. height: 128rpx;
  14. margin: 20rpx;
  15. border-radius: 50%;
  16. }
  17.  
  18. .userinfo-nickname {
  19. color: #aaa;
  20. }
  21.  
  22. .addDiv {
  23. position: absolute;
  24. top:;
  25. left:;
  26. right:;
  27. background-color: #fff;
  28. z-index:;
  29. }
  30.  
  31. .addDivContent {
  32. padding: 10px;
  33. }
  34.  
  35. .addDivInput {
  36. border: solid 1px gainsboro;
  37. border-radius: 6px;
  38. height: 60px;
  39. margin-bottom: 10px;
  40. }
  41.  
  42. .addDivButtonMargin {
  43. margin-right: 20px;
  44. }
  45.  
  46. .hide {
  47. display: none;
  48. }
  49.  
  50. .listDivTop {
  51. display: flex;
  52. flex-direction: row;
  53. justify-content: space-between;
  54. padding-top: 10px;
  55. padding-bottom: 10px;
  56. width: 96%;
  57. border-bottom: 1px solid gainsboro;
  58. }
  59.  
  60. .listDivType {
  61. display: flex;
  62. flex-direction: row;
  63. justify-content: space-around;
  64. width: 60%;
  65. color: #999;
  66. }
  67.  
  68. .listDivTypeSelected {
  69. color: green;
  70. font-weight:;
  71. }
  72.  
  73. .listDivContent {
  74. width: 100%;
  75. color: #666;
  76. margin: 0 auto;
  77. padding: 40rpx 0;
  78. position: absolute;
  79. top: 150px;
  80. }
  81.  
  82. .items {
  83. width: 100%;
  84. }
  85.  
  86. .listDivRow {
  87. width: 98%;
  88. display: flex;
  89. flex-direction: row;
  90. justify-content: space-between;
  91. }
  92.  
  93. .listDivItem {
  94. position: relative;
  95. height: 80rpx;
  96. line-height: 80rpx;
  97. overflow: hidden;
  98. }
  99.  
  100. .inner {
  101. position: absolute;
  102. top:;
  103. }
  104.  
  105. .inner.txt {
  106. width: 100%;
  107. z-index:;
  108. transition: left 0.2s ease-in-out;
  109. white-space: nowrap;
  110. overflow: hidden;
  111. text-overflow: ellipsis;
  112. background-color: lightcyan;
  113. }
  114.  
  115. .itemTime {
  116. font-size: 12px;
  117. }
  118.  
  119. .inner.del {
  120. width: 60px;
  121. text-align: center;
  122. z-index:;
  123. right:;
  124. background-color: red;
  125. }
  126.  
  127. .inner.finish {
  128. width: 80px;
  129. text-align: center;
  130. z-index:;
  131. right: 60px;
  132. background-color: green;
  133. }

  

  

小程序 第一个学习示例(TodoList)的更多相关文章

  1. 微信小程序开发:学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  2. 微信小程序开发:学习笔记[5]——JavaScript脚本

    微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...

  3. 微信小程序开发:学习笔记[2]——WXML模板

    微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...

  4. 微信小程序开发:学习笔记[9]——本地数据缓存

    微信小程序开发:学习笔记[9]——本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...

  5. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  6. 微信小程序开发入门学习(1):石头剪刀布小游戏

    从今天起开始捣鼓小程序了2018-12-17   10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...

  7. 微信小程序开发:学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  8. 微信小程序开发:学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

  9. 微信小程序开发:学习笔记[1]——Hello World

    微信小程序开发:学习笔记[1]——Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/ ...

随机推荐

  1. 几种c++字符串split 函数实现的比较

    文中的字符串split函数功能是 从字符串中按照特定的分隔符进行分割,分割的结果保存到std::vector中. 1. strtok实现 std::vector<std::string> ...

  2. OpenStack-Neutron(5)

    一. Neutron 概述 SDN(software-defined networking)软件定义网络,其所具有的灵活性和自动化优势使其成为云时代网络管理的主流. Neutron的设计目标是实现“网 ...

  3. deepin配置Oracle JDK

    这里记录一下入手deepin后,安装JDK的过程,和之前的CentOS有些不同 本篇参考了两篇博客 1 2 第一篇有些问题,在第二篇中找到了解决方案 接下来是操作过程: 检查本机自带的OpenJDK, ...

  4. Djangon的坑

    <a href="/del_student/?pk={{ students.pk }}"></a> 在django中当你写入这样的语句是,pk={{ stu ...

  5. Java执行jar总结

    1.命令集 1)nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg … ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 ...

  6. Swift 之Carthage

    1. 安装 $ brew update               //更新brew $ brew install carthage   //下载carthage $ carthage version ...

  7. Django------多表操作

    一. 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的 ...

  8. centos2.6.18升级到2.6.39

    本来想升级到最新版本4.6的,但是不成功,即使3.4也不成功,暂且先升级到2.x最新版本. 步骤如下: 一 下载源码 https://www.kernel.org/pub/linux/kernel/ ...

  9. Matlab 中movie函数的使用

    MATLAB中,创建电影动画的过程分为以下四步: step1:调用moviein函数对内存进行初始化(该步骤在Matlab5.3以上均可省略),创建一个足够大的矩阵,使之能够容纳基于当前坐标轴大小的一 ...

  10. 扩展CRT +扩展LUCAS

    再次感谢zyf2000超强的讲解. 扩展CRT其实就是爆推式子,然后一路合并,只是最后一个式子上我有点小疑惑,但整体还算好理解. #include<iostream> #include&l ...