微信小程序之指定页面跳转

笔者初入微信小程序，本博客纯属分享一些笔者在学习过程中遇到的一些问题和解决方法。由于是初入门，用到的方法可能不是很高效，也请大佬们指教

指定页面跳转

笔者在开发小程序的时候，想要实现这样一个功能：用wx：for渲染出4张图片，点击每张图片都会跳转至同一个页面，页面里的内容则是根据点击的相关图片进行加载。
乍一看，觉得有点难搞，这个问题困扰了笔者挺久的，可能也是由于经验不足。之后翻阅资料以及综合网上的方案，笔者终于解决了这个问题：）

下面我用开发的一个小片段进行举例：
Navigate.wxml

//Navigate.wxml
<view class='schools'>
  <block wx:for="{{schoolList}}" wx:key="index">
    <view class='schoolview' catchtap='gotoschooldetail' data-id="{{item.id}}">
      <image class="schoolimg" src="{{item.pic}}" mode="scaleToFill"></image>
    </view>
  </block>
</view>

Navigate.wxss

//wxss
.schools{
 position:relative;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}
.schoolview{
 position:relative;
 width:45%;
 height:14rem;
 left: 10px;
 padding: 5px;
}
.schoolimg{
 width:100%;
 height:80%;
}

Navigate.js

//js
Page({
  data: {
    schoolList: [{
        "id": 1,
        "pic": "../../images/xdf-logo.jpg",
      },
      {
        "id": 2,
        "pic": "../../images/xwg-logo.jpg",
      },
      {
        "id": 3,
        "pic": "../../images/hqys-logo.png",
      },
      {
        "id": 4,
        "pic": "../../images/ppys-logo.jpg",
      }
    ],
  },
  /**
   * 打开学校详情页面
   */
  gotoschooldetail: function(e) {
    var that = this;
    let schoolid = e.currentTarget.dataset.id; //获取index值
    console.log(schoolid);
    wx.navigateTo({
      url: '../schools/schools?schoolid=' + schoolid
    });
  },
})

界面只是为了举例，所以没有做什么调整，渲染出的页面效果图如下所示：
微信小程序之指定页面跳转
emmmm，就这样吧，虽然真的是有点丑，但是懒得进行美工了。
下面需要新创建一个页面，笔者创建的页面定义为schools，这个页面的作用就是被跳转的页面。简单来说就是你点击以上任意图片，都会跳转到schools页面，但是会加载不同的内容。schools页面的代码如下所示：
schools.wxml

//schools.wxml
<view>
{{schoolInfo.school_name}}
</view>

schools.wxss

这个垃圾界面并没有wxss :）

schools.js

//schools.js
var app = getApp();
Page({
  data: {
    schoolid: 0,
    schoolInfo: [],
    schoolInfo1: [
        {
          "school_name": "新东方",
        },
        {
          "school_name": "学为贵",
        },
        {
          "school_name": "环球雅思",
        },
        {
          "school_name": "趴趴雅思",
        }

  ]
  },
  onLoad: function (options) {
    var that = this;
    this.setData({
      schoolid: options.schoolid
    })
  },
  onReady: function () {
    var that = this;
    let sid = this.data.schoolid;
    let sinfo;
    console.log("学校id:" + sid);
    //这里根据学校id的不同，去绑定不同的数据到页面
    if (sid == 1) {
      sinfo = this.data.schoolInfo1[0];

    }
    if (sid == 2) {
      sinfo = this.data.schoolInfo1[1];

    }
    if (sid == 3) {
      sinfo = this.data.schoolInfo1[2];

    }
    if (sid == 4) {
      sinfo = this.data.schoolInfo1[3];

    }
    console.log(sinfo);
    this.setData({
      schoolInfo: sinfo
    })
  },

})

演示效果如图所示：
点击新东方

微信小程序之指定页面跳转
点击学为贵

微信小程序之指定页面跳转
成功完成任务！：）

总结一下就是：用wx：for渲染元素或组件时，需要给其定义一个下标值，每个元素或组件有了下标值之后，开发者就可以通过下标志找到那个元素或组件，单独对其进行操作。（ps.笔者就是因为没有注意到下标问题，所以当时苦恼了半天）

代码已经全部贴上去了，因为不怎么复杂所以就不附上源码了，应该都可以运行的。
切记:创建新的页面时，一定要记得在app.json文件里加上"pages/xxx/xxx",不然会报错的：）

微信小程序之指定页面跳转

微信小程序之指定页面跳转

指定页面跳转

相关推荐