余大侠在劈柴 2022-09-11 09:47 采纳率: 100%
浏览 157
已结题

微信小程序如何把一个页面的某个数据传到另一个页面去

在首页明细这里,通过相加后变化数据的支出部分,将他的数据动态的传递给另一个页面,麻烦用代码讲讲,因为支出总额要随下面增加的账单而变化,用全局变量能实现吗?

img

img

  • 写回答

8条回答 默认 最新

  • 林一怂儿 前端领域新星创作者 2022-09-13 23:19
    关注

    Hi~ 少年我又带着不是最优解的案例来了。
    简陋的效果:

    img

    粗糙的代码:
    index/index.wxml

    <view>总支出: {{totalExpenditure}}</view>
    <view>支出条目</view>
    <view wx:for="{{billFlow}}" wx:key="unique">
      {{item.content}} {{item.price}}</view>
    

    index/index.js

    const app = getApp()
    
    Page({
      data: {
        totalExpenditure: 0,
        billFlow: []
      },
      onShow() {
        this.setData({
          totalExpenditure: app.totalExpenditure(),
          billFlow: app.billFlow
        })
      }
    })
    

    index2/index.wxml

    <view>剩余预算: {{remainingBudget}}</view>
    <view>本月预算: {{budget}}</view>
    <view>本月支出: {{totalExpenditure}}</view>
    
    <view bindtap="pay" wx:for="{{goods}}" wx:key="unique" data-price="{{item.price}}" data-content="{{item.content}}">{{item.content}} {{item.price}}</view>
    

    index2/index.js

    const app = getApp()
    
    Page({
      data: {
        totalExpenditure: 0,
        remainingBudget: 0,
        budget: 0,
        billFlow: [],
        goods: [
          {
            content: '棒棒糖',
            price: 1,
          },
          {
            content: '口香糖',
            price: 2,
          }
        ]
      },
      onShow() {
        this.setData({
          totalExpenditure: app.totalExpenditure(),
          billFlow: app.billFlow,
          budget: app.budget,
          remainingBudget: app.remainingBudget()
        })
      },
      pay(e) {
        const { price, content } = e.currentTarget.dataset;
        app.billFlow.push({
          content,
          price: -1 * price
        })
        this.onShow()
      }
    })
    

    app.js

    App({
      // 预算
      budget: 100,
      // 账单流水
      billFlow: [
        {
          content: '餐饮',
          price: -73
        }
      ],
      // 总支出
      totalExpenditure() {
        return Math.abs(this.billFlow.filter(f => f.price < 0).reduce((t, i) => t + i.price, 0))
      },
      // 剩余预算 
      remainingBudget(){
        return this.budget - this.totalExpenditure();
      }
    })
    

    https://developers.weixin.qq.com/s/2gupefmd7SCi

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(7条)

报告相同问题?

问题事件

  • 系统已结题 9月22日
  • 已采纳回答 9月14日
  • 创建了问题 9月11日

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?