微星小程序如何设计页面跳转？

我要设计这样一个微信小程序封面点进去一个界面有7个选项随便点一个选项进去就是另一个界面请问各位大神能怎么实现吗

路由跳转，api

wx.navigateTo(Object object) | 微信开放文档微信开发者平台文档

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

设置路由进行跳转即可，可以参考这篇文章

微信小程序详解——页面之间的跳转方式【路由】和参数传递_何时不少年的博客-CSDN博客_微信小程序页面跳转代码微信小程序拥有web网页和Application共同的特征，我们的页面都不是孤立存在的，而是通过和其他页面进行交互，来共同完成系统的功能。今天我们来研究小程序页面之间的跳转方式。 1.

https://blog.csdn.net/qq_26585943/article/details/54584558

看这篇文章就行
https://blog.csdn.net/isoble/article/details/57074752

https://blog.csdn.net/wys997/article/details/107945946?spm=1005.2026.3001.5635&utm_medium=distribute.pc_relevant_ask_down.none-task-blog-2~default~OPENSEARCH~Rate-3.pc_feed_download_top3ask&depth_1-utm_source=distribute.pc_relevant_ask_down.none-task-blog-2~default~OPENSEARCH~Rate-3.pc_feed_download_top3ask

这个应该是基础操作吧，建议学习一下，官方文档是一个不错的参考资料

请参考：
http://wl.plb1.com/?code=B9pqe454QJtJH39QSfQr6g%3D%3D
https://blog.csdn.net/isoble/article/details/57074752

页面中的js代码要这样控制：
//引入数据文件
var postsData=require("../../data/posts-data.js");
Page({
data:{

},
onLoad:function(options){
    //页面初始化，options为页面跳转所带来的参数
    this.setData({
            posts_key:postsData.postList
        });
},
onPostTap:function(event){
   var postId = event.currentTarget.dataset.postid; 
   // console.log("postId is"+postId);
   wx.navigateTo({
     url: 'post-detail/post-detail?id='+postId
   })
}

})
跳转的时候可以这样携带参数：（看wx.navigateTo）一个参数就用’post-detail/post-detail?id=’+id1，如果多个参数就用’post-detail/post-detail?id=’+id1+‘abc=’+’hello’

对应跳转后的页面中的js是这样接收参数的：
var postsData=require("../../../data/posts-data.js")
Page({
onLoad:function(option){
//onLoad生命周期函数，在一个页面中只会加载一次
//在onLoad声明周期函数中，option为页面跳转所带来的参数
console.log(option);
var postId = option.id;
var postData = postsData.postList[postId];
//console.log(postData);

  //this.setData做数据绑定
  //目前不能使用this.data
  this.setData(
      {
          postData:postData
      }
  )
  //console.log(postData);

}
})