小程序中从分类页跳转到详情页是否与vue项目中的方法一样呢？让我们一起来看看在小程序中是如何实现的吧（继上篇分类页的实现）。

$color{red}{重难点：数据（参数）的传递与接收}$

先看效果图：

详情页的相关代码如下所示：

detail.wxml文件

<!--pages/detail/detail.wxml--><view class='detail'>  <swiper       indicator-dots="{{indicatorDots}}"      autoplay="{{autoplay}}"       interval="{{interval}}"       duration="{{duration}}"      circular="{{circular}}"      class='swiper'>      <block wx:for="{{imgUrls}}" wx:key >        <swiper-item>          <image wx:if='{{hadImage}}' src="{{item.imgUrl}}" class="slide-image" />        </swiper-item>      </block>  </swiper><view class='detailTo'>  <view class='detailName'>{{detailName}}</view>  <view class='desc'>{{desc}}</view>  <view class='detailPrice'>￥{{detailPrice}}</view>  <view class='detailCount'>    <view class='add' bindtap='handleAdd'>+</view>    <view class='detailNum'>{{goodsNum}}</view>    <view class='redus' bindtap='handleRedus'>-</view>  </view></view> <view class='detailBottom'>  <button class='addBtn' type='primary' bindtap='handleCart'>加入购物车</button>  <button class='buyBtn' type='warn'>立即购买</button> </view> </view>

detail.js文件

// pages/detail/detail.js// var jsonData=require("../data/detailData.js")Page({  /**   * 页面的初始数据   */  data: {    indicatorDots: true,    autoplay: true,    circular:true,    interval: 3000,    duration: 1000,    //初始化详情页开始显示的数量    goodsNum:1  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    // console.log(options)    //先获取上个页面传递过来的数据    var detailId = options.id;    var detailName=options.name;    var desc=options.desc;    var detailPrice=options.price;    var detailImage=options.image;    //将获取到的路径以，截取出来    var imgUrls = options.imgUrls.split(',');    var imgArray=[];    var hadImage = false;     // 循环所有的图片路径，图片不为空则存到数组imgArray中    for (var i = 0; i < imgUrls.length;i++){      if (imgUrls[i] != "undefined") {        var obj = {          imgUrl: imgUrls[i],        }        imgArray.push(obj);      }    }    //判断是否有图片    if (imgArray.length>0){      hadImage=true;    }else{      hadImage=false;    }    //列表页面传递的数据    this.setData({      detailId: detailId,      detailName: detailName,      desc:desc,      detailPrice: detailPrice,      detailImage: detailImage,      imgUrls: imgArray,      hadImage: hadImage    })  },  handleAdd(){    var goodsCount=this.data.goodsNum+1;    this.setData({      goodsNum:goodsCount    })  },  handleRedus(){    var goodsCount=this.data.goodsNum-1;    if (goodsCount<1){      wx.showToast({        title: '再不能减啦?',      })      return;    }    this.setData({      goodsNum: goodsCount    })  },  //此处是加入购物车用的（本节尚未用到）  handleCart(){    wx.navigateTo({      url: '../shoppingCart/shoppingCart?goodsNum=' + this.data.goodsNum + '&detailName=' + this.data.detailName + '&detailPrice=' + this.data.detailPrice + '&detailImage=' + this.data.detailImage,    })  }})

更新后的分类页主要代码

在上篇分类页实现的文件中更新了wxml文件，js文件并未改动，所以在下面只展示wxml文件。

wxml文件

<view class="main">  <view class="categroy-left">   <!-- 当前项的id等于item项的id或者当前的下标等于item的下标时，那个就是当前状态- -->       <view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}"           bindtap="switchTab"           class="cate-list {{curIndex === index?'active':''}}">{{item.name}}       </view>   </view>   <scroll-view class="categroy-right" scroll-y           scroll-into-view="{{toView}}" scroll-with-animation="true">     <view wx:if="{{category[curIndex].isChild}}">       <block wx:for="{{category[curIndex].children}}" wx:for-index wx:key="idx">        <navigator url='../detail/detail?id={{item.child_id}}&name={{item.name}}&price={{item.price}}&imgUrls={{item.imgUrls}}&desc={{item.desc}}&image={{item.image}}' class='naviga' hover-class="none">          <view class="cate-title">            <image wx:if="{{item.image}}" src='{{item.image}}'></image>            <view class='detailText'>              <text class='name'>{{item.name}}</text>              <text class=
              

                点击这里免费试用，快速创建您的专属小程序
              
              

                标签：
                微信小程序
                小程序
                小程序是什么