微信小程序路由传参

1.用bindtap 设定一个点击事件

例:  <view class='right-box'  wx:for="{{listdata}}" wx:key='index'  data-name="{{item.name}}" bindtap='Shopdetail'> 
              <image src='{{ item.icon }}'></image> 
              <text class='text'>{{ item.name }}</text> 
      </view> 

2. 在属于以上这段代码的js文件中写这个事件

  //  点击单个商品跳到商品详情页
    Shopdetail(e){
       let id=e.currentTarget.dataset.id;
       console.log(id)
       wx.navigateTo({
           url: '../shopdetail/shopdetail?id=' +id
         })
      },

3 .在你跳到的那个文件的js文件onLoad中写入你要获取的接口数据

data: {
  shopdata:'',
  hidden:true, 
},
onLoad: function (options) {
console.log(options)
var shoplist=[ ];
wx.request({
  url: 'https://api.it120.cc/small4/shop/goods/list',
  success: (res)=> {
    console.log(res.data.data)
    for (var i=0; i<res.data.data.length ; i++) {
      console.log(res.data.data[i].categoryId)
      if (options.id==res.data.data[i].categoryId ){
        shoplist.push(res.data.data[i])
        console.log(shoplist)
        this.setData({
          shopdata: shoplist,
          hidden: false, // 控制显示隐藏
          //res代表success函数的事件对,data是固定的,stories是是上面json数据中stories
         })
      }
    }
  }
})

},

4. 在数据渲染到这个文件中

<view class='Shop'>
<view class='unShop' hidden='{{hidden==false}}'>
   <image src='../../static/img/商品.png' class='Image'/>
    <text class='Imagetext'>还没有商品哦</text>
</view>
<view class='shopdetail'  hidden='{{hidden!=hidden}}'>
    <view wx:for='{{shopdata}}' wx:key='index' class='singShop' data-id='{{item.id}}' bindtap='SingShop'>
        <image src='{{item.pic}}' class='shopimage'/>
        <text class='textname'>{{item.name}}</text>
        <text class='textprice'>
              <text class='textred'>¥{{item.originalPrice}}</text>
              <text class='textstores'>已售{{item.stores}}</text>
        </text>
    </view>
</view>

</view>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容