百度小程序列表中点击跳转详情页流程步骤

微信(小程序)  /  管理员 发布于 3年前   1852

近期会研究一下百度小程序，打算多写几篇文章几个demo

接上上一篇列表展示后，这里是点击列表里面一条数据跳转至该数据的对应的详情页

工具：

还是用那个在线的web ide （确实很方便）

步骤：

1.首页列表 添加url 详情页的链接 相当于a标签

pages/index/index.swan代码

<view class="center">
    <view class="center-title">--中间</view>
    <block>
        <navigator url="../detaills/detaills?id={{item.id}}" s-for="item, index in testArr">
            <view class="liebiao">
                <view class="liebiao-title">{{item.id}}</view>
                <view style="font-size:26rpx;color:red;">{{item.Name}}</view>
            </view>
        </navigator>
    </block>
</view>

2.新建详情文件夹pages/detaills 目录下新建文件

detaills.css
detaills.js
detaills.json
detaills.swan

3.添加跳转链接url （相当于路由）

在根目录app.json文件里面

{
    "pages": [
        "pages/index/index",
        "pages/detaills/detaills"
    ],
    "window": {
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "智能小程序",
        "backgroundTextStyle": "light"
    }
}

4.添加详情页文件 （一样是四个文件 这里就不贴全了 毕竟是测试）

pages/detaills/detaills.swan代码 

随便输入几个字符串 测试分辨

<view>
    detaill
</view>

pages/detaills/detaills.js代码

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    showTop: true
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    
    let _this = this;
    
    // app.requireApi.get('/api/xx', { id: options.id }).then(res => {
    //   _this.setData({
    //     card: res
    //   });
    //   console.log("详情页后端接口数据", res);
    // });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
});

点击列表页进入详情页 效果图：