微信小程序wx:for遍历列表后点击不同列表跳转不同页面

最新推荐文章于 2024-07-25 16:38:27 发布

YavR

最新推荐文章于 2024-07-25 16:38:27 发布

阅读量1k

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/m0_52818006/article/details/127320935

版权

wxml代码

<view class="shangpingflex">
  <view wx:for="{{shangpinglan}}" wx:key="{{item.id}}" bindtap='changBtn' data-id="{{item.id}}">
    <view class="biankuang">
      <image src="{{item.img}}" mode="widthFix"></image>
      <view style="color: red;">{{item.price}}</view>
      <view>{{item.title}}</view>
    </view>
  </view>
</view>

JS代码data里面编写

    shangpinglan: [{
        id: '01',
        img: "https://img12.360buyimg.com/n7/jfs/t1/32460/11/17666/17264/63193af5E8dba89ac/d468918fb41ad2bc.jpg",
        price: "8899.00",
        title: "14 Pro  (A2892) 256GB 暗紫色 支持移动联通电信5G 双卡双待手机",
      },
      {
        id: "02",
        img: "https://img10.360buyimg.com/n7/jfs/t1/132022/23/12216/60913/5f86195bEacd08599/c5dc348d3f943324.jpg",
        price: "4399.00",
        title: "11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",
      },
      {
        id: '03',
        img: "	https://img14.360buyimg.com/n7/jfs/t1/170203/19/29803/19184/6319229dE781a8a87/1a2d336dfe4fa89f.jpg",
        price: "6899.00",
        title: "14 (A2884) 256GB 紫色 支持移动联通电信5G 双卡双待手机 Apple合约机 联通用户专享",
      },
      {
        id: '04',
        img: "https://img12.360buyimg.com/n7/jfs/t1/199896/15/21859/49376/62654138E671382d9/1bfd8c05b8809776.jpg",
        price: "2699.00",
        title: " xr 美版 全新已激活版 三网通店保单卡 iPhone ",
      },
      {
        id: '05',
        img: "https://img14.360buyimg.com/n7/jfs/t1/197505/24/13599/83205/616dc631E854d2563/e98b96e5044af9da.jpg",
        price: "14999.00",
        title: "Apple MacBook Pro 14英寸 M1 Pro芯片(8核中央处理器 14核图形处理器) 16G 512G 深空灰 ",
      },
      {
        id: '06',
        img: "https://img10.360buyimg.com/n7/jfs/t1/185310/31/28818/48997/6327c887Efa0f6a62/c43657632abdeb16.jpg",
        price: "12499.00",
        title: "Apple MacBook Air 13.6 8核M2芯片(8核图形处理器) 16G 512G 午夜色 ",
      },
    ]