美文网首页我爱编程
微信小程序路由传参

微信小程序路由传参

作者: 郭的妻 | 来源:发表于2018-06-04 00:10 被阅读7次

    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>

    相关文章

      网友评论

        本文标题:微信小程序路由传参

        本文链接:https://www.haomeiwen.com/subject/gfnssftx.html