百度小程序列表中点击跳转详情页流程步骤
微信(小程序)  /  管理员 发布于 8个月前   739
近期会研究一下百度小程序,打算多写几篇文章几个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 () {},
});
点击列表页进入详情页 效果图:
博主 在
centos7中Meili Search搜索引擎安装流程步骤中评论 @鹿 执行以下命令看看你的2.27版本是否存在strin..鹿 在
centos7中Meili Search搜索引擎安装流程步骤中评论 这是我的错误提示,下载了对应的glibc-2.25.tar.gz后续按照教程操作..阿凡达123 在
golang 怎么做热更新中评论 也可以看看这个:https://github.com/edwingeng/hot..博主 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..GGGGGGGGG 在
layui框架常用输入框介绍中评论 写的很好解决问题..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号