拼好饭大王111 2024-06-23 00:06 采纳率: 0%

2.我点击商品信息进入后，我的想法是将我json里面的数据join值修改，然后再在购物车页面判断join值（相关搜索：微信小程序）

急需帮助微信小程序购物页面
1.我想把页面写成2*2的形式

<!-- 商品列表 -->
<view class="goods">
  <view class="goods_list" wx:for="{{goods_list}}" wx:key="value">
    <navigator url="./detail/detail?id={{item.id}}">
      <view class="goods_img">
      <image src="{{item.img}}" />
    </view>
    <view class="goods_text">
      <text>{{item.text}}</text>
    </view>
    <view class="goods_price">
      ￥<text>{{item.price}}</text>.00
    </view>
    </navigator>
  </view>
</view>


```wxss
/* 商品列表 */

.goods_list{
  border: 1px solid #cccccc;
  width: 165px;
}
.goods_img>image{
  width: 125px;
  height: 125px;
  margin-left: 20px;
}
.goods_text{
  font-size: 11pt;
}
.goods_price{
  font-size: 10pt;
  color: red;
}

2.我点击商品信息进入后，加入购物车，我的想法是将我json里面的数据join值修改，然后再在购物车页面判断join值，可无法修改这个值，我也不知道怎么在另一个页面进行判断

{
    "goods_list":[
    {    
        "id":0,
        "value":"1",
        "text":"创维C5 Pro 65英寸电视120Hz高刷 2+32G 4K全面屏投屏声控液晶平板游戏电视",
        "price":"3699",
        "img":"http://127.0.0.1:3000/创维电视.png",
        "detail":"http://127.0.0.1:3000/cw.jpg",
        "join":"未加入"
    },
    {
        "id":1,
        "value":"2",
        "text":"米家米家小米新风机空气净化器 除菌除甲醛",
        "price":"2699",
        "img":"http://127.0.0.1:3000/米家空气.png",
        "detail":"http://127.0.0.1:3000/米家.jpg",
        "join":"未加入"
    },
    {
        "id":2,
        "value":"3",
        "text":"小天鹅(Little Swan)浣彩系列 滚筒洗衣机全自动 ",
        "price":"4599",
        "img":"http://127.0.0.1:3000/小天鹅洗衣机.png",
        "detail":"http://127.0.0.1:3000/小天鹅.jpg",
        "join":"未加入"
    },
    {
        "id":3,
        "value":"4",
        "text":" 美的(Midea)空调 2匹旋耀 壁挂式 客厅商铺 冷暖挂机",
        "price":"4449",
        "img":"http://127.0.0.1:3000/美的空调.png",
        "detail":"http://127.0.0.1:3000/md.jpg",
        "join":"未加入"
    }
    ]
}{
    "goods_list":[
    {    
        "id":0,
        "value":"1",
        "text":"创维C5 Pro 65英寸电视120Hz高刷 2+32G 4K全面屏投屏声控液晶平板游戏电视",
        "price":"3699",
        "img":"http://127.0.0.1:3000/创维电视.png",
        "detail":"http://127.0.0.1:3000/cw.jpg",
        "join":"未加入"
    },
    {
        "id":1,
        "value":"2",
        "text":"米家米家小米新风机空气净化器 除菌除甲醛",
        "price":"2699",
        "img":"http://127.0.0.1:3000/米家空气.png",
        "detail":"http://127.0.0.1:3000/米家.jpg",
        "join":"未加入"
    },
    {
        "id":2,
        "value":"3",
        "text":"小天鹅(Little Swan)浣彩系列 滚筒洗衣机全自动 ",
        "price":"4599",
        "img":"http://127.0.0.1:3000/小天鹅洗衣机.png",
        "detail":"http://127.0.0.1:3000/小天鹅.jpg",
        "join":"未加入"
    },
    {
        "id":3,
        "value":"4",
        "text":" 美的(Midea)空调 2匹旋耀 壁挂式 客厅商铺 冷暖挂机",
        "price":"4449",
        "img":"http://127.0.0.1:3000/美的空调.png",
        "detail":"http://127.0.0.1:3000/md.jpg",
        "join":"未加入"
    },
    {
        "id":4,
        "value":"5",
        "text":"东芝（TOSHIBA）黑钻石家用高容全嵌超薄零嵌法式多门四门镜面电冰箱制冰一级能效变频",
        "price":"19944",
        "img":"http://127.0.0.1:3000/东芝冰箱.png",
        "detail":"http://127.0.0.1:3000/dz.jpg",
        "join":"未加入"
    },
    {
        "id":5,
        "value":"6",
        "text":"Apple苹果 iphone15promax 全网通5G手机",
        "price":"8799",
        "img":"http://127.0.0.1:3000/iphone15promax.png",
        "detail":"http://127.0.0.1:3000/15promax.jpg",
        "join":"未加入"
    },
    {
        "id":6,
        "value":"7",
        "text":"小米14 Pro 16GB+1TB 骁龙8gen3",
        "price":"2299",
        "img":"http://127.0.0.1:3000/小米14pro.png",
        "detail":"http://127.0.0.1:3000/14pro.jpg",
        "join":"未加入"
    },
    {
        "id":7,
        "value":"8",
        "text":"华为Mate60 双向北斗卫星消息NFC红外遥控系列高端旗舰",
        "price":"7199",
        "img":"http://127.0.0.1:3000/mate60.png",
        "detail":"http://127.0.0.1:3000/mate60.jpg",
        "join":"未加入"
    },
    {
        "id":8,
        "value":"9",
        "text":"三星（SAMSUNG）GaIaxy S24 AI手机",
        "price":"3799",
        "img":"http://127.0.0.1:3000/s24.png",
        "detail":"http://127.0.0.1:3000/s24.jpg",
        "join":"未加入"
    },
    {
        "id":9,
        "value":"10",
        "text":"联想拯救者Y9000P 2024电竞游戏本",
        "price":"7899",
        "img":"http://127.0.0.1:3000/y9000p.png",
        "detail":"http://127.0.0.1:3000/y9000p.jpg",
        "join":"未加入"
    },
    {
        "id":10,
        "value":"11",
        "text":"大疆 DJI Pocket 2 灵眸手持云台摄像机便携式",
        "price":"1999",
        "img":"http://127.0.0.1:3000/dj2.png",
        "detail":"http://127.0.0.1:3000/dj.jpg",
        "join":"未加入"
    },
    {
        "id":11,
        "value":"12",
        "text":"索尼（SONY）PS5 PlayStation5（轻薄版 1TB）光驱版",
        "price":"3499",
        "img":"http://127.0.0.1:3000/ps5.png",
        "detail":"http://127.0.0.1:3000/ps5.jpg",
        "join":"未加入"
    },
    {
        "id":12,
        "value":"13",
        "text":"AMD 锐龙7 7800X3D游戏处理器(r7) 8核16线程 ",
        "price":"2399",
        "img":"http://127.0.0.1:3000/7800x3d.png",
        "detail":"http://127.0.0.1:3000/7800x3d.jpg",
        "join":"未加入"
    },
    {
        "id":13,
        "value":"14",
        "text":"微星（MSI）万图师 GeForce RTX 4070 SUPER 12G VENTUS 3X OC",
        "price":"4899",
        "img":"http://127.0.0.1:3000/rtx4070super.png",
        "detail":"http://127.0.0.1:3000/rtx4070super.jpg",
        "join":"未加入"
    },
    {
        "id":14,
        "value":"15",
        "text":"雷蛇（Razer） 炼狱蝰蛇v3pro专业版无线2.4G电竞游戏轻量化鼠标",
        "price":"1299",
        "img":"http://127.0.0.1:3000/v3pro.png",
        "detail":"http://127.0.0.1:3000/v3pro.jpg",
        "join":"未加入"
    },
    {
        "id":15,
        "value":"16",
        "text":"WOOTINGWooting60HE+ 全新现货 磁轴键盘",
        "price":"2700",
        "img":"http://127.0.0.1:3000/wooting.png",
        "detail":"http://127.0.0.1:3000/wooting.jpg",
        "join":"未加入"
    },
    {
        "id":16,
        "value":"17",
        "text":"高驰（COROS）COROS 高驰PACE 3双频全星座运动手表音乐马拉松跑步骑行越野游泳",
        "price":"1699",
        "img":"http://127.0.0.1:3000/pace3.png",
        "detail":"http://127.0.0.1:3000/pace3.jpg",
        "join":"未加入"
    },
    {
        "id":17,
        "value":"18",
        "text":"索尼（SONY）ZV-E10L 半画幅微单相机",
        "price":"4999",
        "img":"http://127.0.0.1:3000/sony.png",
        "detail":"http://127.0.0.1:3000/zv.jpg",
        "join":"未加入"
    }
    ]
}

<!--detail/detail/detail.wxml-->

<view class="detail">
  <scroll-view class="detail_scroll" scroll-y="true" >
    <!-- 照片 -->
    <view class="detail_img">
      <image src="{{goods_list[ id ].img}}" />
    </view>
    <!-- 价格 -->
    <view class="detail_price">
      ￥<text>{{goods_list[ id ].price}}</text>.00
    </view>
    <!-- 内容 -->
    <view class="detail_content">
      <text>{{goods_list[ id ].text}}</text>
    </view>

<!-- 线 -->
    <view class="line"></view>
    <view class="xq">详情</view>
    <!-- 详情 -->
    <view class="detail_detail">
      <image src="{{goods_list[ id ].detail}}"/>
    </view>
    
  </scroll-view>
  
</view>

<view class="dibu">
  <!-- 购物车 -->
  <navigator open-type="redirect" url="../../../test3/test3/test3">
    <view class="shopCar">
      <image  src="../../../img/icon/购物车.png" />
      <text>购物车</text>
    </view>
  </navigator>
  
  <!--  加入购物车-->
  <view class="join" bind:tap="join" >加入购物车</view>
  <!-- 立即购买 -->
  <view class="buy" bind:tap="buy">立即购买</view>
</view>

// test1/test1/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.showLoading({
      title: '數據加載。。。',
    })
    wx.request({
      url: 'http://127.0.0.1:3000',
      method:"GET",
      success:res=>{
        if(res.statusCode == 200){
          this.setData(res.data)
          console.log(res.data)
        }else{
          wx.showModal({
            title: '服務器異常',
          })
        }
        setTimeout(()=>{
          wx.hideLoading()
        },500)
      },
      fail:function(){
        wx.hideLoading()
        wx.showModal({
          title: '網絡異常，無法請求服務器',
        })
      }
    }),
    console.log(options.id)
    this.setData({
      id:options.id
    })
  },
  // 方法
  updateJoinStatus: function(itemId, newStatus) {
    let updatedGoodsList = this.data.goods_list.map(item => {
      if (item.id === itemId) {
        // 更新join状态
        return {...item, join: newStatus};
      }
      return item;
    });
  
    // 使用setData更新数据，触发视图更新
    this.setData({
      goods_list: updatedGoodsList
    });
  },
  join:function(event){
    const itemId = event.currentTarget.dataset.id;
    wx.showToast({
      title: '添加成功',
    }),
    this.setData({
      join:"加入"
    }),
    this.updateJoinStatus(itemId,"已加入")
  },

  // 购买
  buy:function(){
    wx.showToast({
      title: '购买成功',
    })
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

3.底部栏怎么做到滑动固定的

<!--detail/detail/detail.wxml-->

<view class="detail">
  <scroll-view class="detail_scroll" scroll-y="true" >
    <!-- 照片 -->
    <view class="detail_img">
      <image src="{{goods_list[ id ].img}}" />
    </view>
    <!-- 价格 -->
    <view class="detail_price">
      ￥<text>{{goods_list[ id ].price}}</text>.00
    </view>
    <!-- 内容 -->
    <view class="detail_content">
      <text>{{goods_list[ id ].text}}</text>
    </view>

<!-- 线 -->
    <view class="line"></view>
    <view class="xq">详情</view>
    <!-- 详情 -->
    <view class="detail_detail">
      <image src="{{goods_list[ id ].detail}}"/>
    </view>
    
  </scroll-view>
  
</view>

<view class="dibu">
  <!-- 购物车 -->
  <navigator open-type="redirect" url="../../../test3/test3/test3">
    <view class="shopCar">
      <image  src="../../../img/icon/购物车.png" />
      <text>购物车</text>
    </view>
  </navigator>
  
  <!--  加入购物车-->
  <view class="join" bind:tap="join" >加入购物车</view>
  <!-- 立即购买 -->
  <view class="buy" bind:tap="buy">立即购买</view>
</view>

/* detail/detail/detail.wxss */
.detail_scroll{
  height: 100%;
}
.detail_img>image{
  margin-top: 10px;
  width: 100%;
  height: 250px;
  margin-bottom: 10px;
}
.detail_price{
  color: red;
  font-size: 15pt;
  margin-bottom: 10px;
}

.detail_content>text{
  font-size: 12pt;
}
.line{
  margin-top: 15px;
  border: 1px solid #cccccc;
  background-color: #cccccc;
}
.xq{
  font-size: 15pt;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.detail_detail>image{
  height: 2000px;
  margin-left: 25px;
}

.dibu{
  display: flex;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 8rpx;
}
.shopCar{
  display: flex;
  flex-direction: column;
}
.shopCar>image{
  width: 44px;
  height: 44px;
}
.join{
  margin-left: 150px;
  border: 1px solid #fbff02;
  background-color: #fbff02;
  border-radius: 8rpx;
}
.buy{
  margin-left: 20px;
  border: 1px solid #ff0000;
  background-color: #ff0000;
  border-radius: 8rpx;
}

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

阿里嘎多学长 2024-06-23 08:40

关注

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

你好！很高兴帮助你解决微信小程序购物页面的问题。

1. 商品列表页面布局为2x2网格形式

要实现2x2的网格布局，你可以使用微信小程序的flex布局方式。以下是修改后的wxml和wxss代码示例：

<!-- 商品列表 -->
<view class="goods_grid">
  <view class="goods_row" wx:for="{{goods_list}}" wx:key="index" wx:for-item="item" wx:for-index="idx">
    <view class="goods_item">
      <navigator url="./detail/detail?id={{item.id}}">
        <view class="goods_img">
          <image src="{{item.img}}" mode="aspectFill" />
        </view>
        <view class="goods_text">
          <text>{{item.text}}</text>
        </view>
        <view class="goods_price">
          ￥<text>{{item.price}}</text>.00
        </view>
      </navigator>
    </view>
  </view>
</view>

/* 商品列表 */
.goods_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.goods_row {
  display: flex;
  width: 100%;
}

.goods_item {
  flex: 0 0 calc(25% - 10px); /* 减去间隔 */
  margin-bottom: 10px;
}

.goods_img>image {
  width: 100%;
  height: 150px; /* 根据需要调整高度 */
}

.goods_text {
  font-size: 11pt;
}

.goods_price {
  font-size: 10pt;
  color: red;
}

2. 修改`join`值并在购物车页面判断

在detail.js中，你已经定义了updateJoinStatus函数来更新join状态。你需要确保join事件被正确触发，并且传递正确的itemId。以下是修改后的join方法：

join: function (event) {
  const itemId = event.currentTarget.dataset.id; // 确保这里能获取到正确的itemId
  this.updateJoinStatus(itemId, "已加入");
  wx.showToast({
    title: '添加成功',
  });
  // 这里可以调用其他方法，比如更新本地存储或者全局状态等
}

确保在detail.wxml中为join按钮绑定正确的data-id：

<view class="join" bind:tap="join" data-id="{{goods_list[id].id}}">加入购物车</view>

3. 实现底部栏固定显示效果

要实现底部栏在页面滚动时固定显示，你可以使用微信小程序的fixed属性。以下是修改后的wxml代码示例：

<view class="dibu" style="position: fixed; bottom: 0; left: 0; right: 0;">
  <!-- 购物车和加入购物车、立即购买按钮 -->
</view>

在wxss中，你不需要为.dibu设置display: flex以外的其他样式，因为它已经是固定在底部的。

参考链接

希望这些信息能帮助你解决问题。如果还有其他疑问，欢迎继续提问！

编辑记录

报告相同问题？

关注问题

利用 uni-app 动态生成 pages.json 的自动化实践与优化
2025-10-28 03:49

奶包子的博客本文深入探讨了在 uni-app 项目中动态生成 pages.json 的自动化实践与优化方案。通过利用 uni-app 内置的 pages.js 钩子，将臃肿的静态配置文件拆分为模块化配置，实现按业务模块管理路由。该方法能有效解决多人协作...
Vue/vant——渲染详情页添加购物车数据渲染到购物车页面，并进行删除数据效果
2022-01-19 16:55

Southern Wind的博客在登陆成功后请求购物车页面数据 Login.vue setTimeout(() => { this.$axios({ method: "post", url: "/login", data: { username: this.username, password: this.password, },
python爬取淘宝商品信息_python爬取淘宝商品信息并加入购物车
2020-11-29 15:44

weixin_39543655的博客先说一下最终要达到的效果：谷歌浏览器登陆淘宝后，运行python项目，将任意任意淘宝商品的链接传入，并手动选择商品属性，输出其价格与剩余库存，然后选择购买数，自动加入购物车。在开始爬取淘宝链接之前，咱么要先...
商城系统:包含用户注册/用户登陆/商品浏览/我的购物车功能.
2019-04-21 15:51

weixin_30588675的博客 """import osimport jsonfrom datetime import datetimeUSER_STATUS = FalseUSER_COUNT = {}SHOPPING_CAR = {}def decorate(arg): def inner(): if not USER_STATUS: print('请先登陆后再查看!') ...
11.购物车页面下订单
2024-08-22 18:17

山时的博客 " > 下订单" > 下订单onclickplaceOrder" > 下订单...", "请选择要购买的商品！");return;${if(!toast("错误!" , "请选择要购买的商品！");return;if(!toast("错误！" , "查询失败！");return;if(!toast("失败！return;
12. 购物车页面确认订单
2024-08-24 00:25

山时的博客在上一篇文章中，我们完成了在购物车页面的下订单操作，选取商品进行下订单后会弹出订单页面的模态框，在模态框中我们还要对商品进行确认，进行确认支付，完成支付，当然在这里的支付只是页面效果达成的，在当前下...
掌握JSON：数据交换的轻量级解决方案
2025-05-03 09:51

叶深深的博客 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的一个子集，易于人阅读和编写，同时也易于机器解析和生成。JSON基于文本，独立于语言，并且具有自我描述性，这使得它非常适用于...
uniapp项目之小兔鲜儿小程序商城(七) 商品详情页(登录后):加入购物车，立即购买（SKU 模块）,购物车页
2025-06-25 15:53

前端OnTheRun的博客摘要本文主要介绍了商品详情页SKU模块的实现方法。SKU（库存管理最小单元）是电商系统的核心功能，文章通过以下步骤实现：从uni-app插件市场下载vk-data-goods-sku-popup组件通过easycom机制自动引入组件创建...
js+html实现购物车功能
2022-02-20 19:20

当用户点击“加入购物车”按钮时，我们可以获取该商品的信息，并将其存储在数组中。同时，我们还可以更新购物车图标或计数器，显示已选择的商品数量。 ```javascript document.querySelectorAll('.product button')...
显示购物车列表和修改商品数量
2022-01-26 19:17

尊者我悟了的博客显示购物车列表 购物车-显示列表-持久层规划需要执行的SQL语句显示某用户的购物车列表数据的SQL语句大致是。 SELECT cid, uid, pid, t_cart.price, t_cart.num, t_product.title, t_product.price AS ...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 6月23日