微信小程序文章详情页跳转案例详解


Posted in Javascript onJuly 09, 2019

前面写了一篇小程序访问公众号文章

里面所有的文章列表里面都是跳转了同一篇文章链接,那么,如果所有的列表跳转详情页的时候,跳转对应id所在的文章又该怎么写?

微信小程序文章详情页跳转案例详解

index.html

<view class="container">
 <view wx:for="{{cardTeams}}" wx:key="{{index}}" wx:for-item="cardTeam" class="item">
 <image class="img" src="{{cardTeam.imgsrc}}" mode="scaleToFill"></image>
 <view class="number-wrapper">
  <text class="name">{{cardTeam.name}}</text>
  <view class="count-wrapper">
  <text class="count">{{cardTeam.count}}</text>
  </view>
  <view class="details">
  <navigator url="../details/details?goodsId={{index}}">查看详情</navigator>
  </view>
 </view>
 </view>
</view>

index.wxss

.container {
 padding-top: 0;
}

.item {
 width: 100%;
 height: 220rpx;
 position: relative;
 display: flex;
 margin: 10rpx 10rpx;
 border-bottom: 1px solid rgb(197, 199, 199);
}

.item:first-child {
 margin-top: 0;
}

.item .remove {
 width: 60px;
 height: 100%;
 background-color: red;
 position: absolute;
 top: 0;
 right: -60px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.item .number-wrapper {
 
 padding-top: 25rpx;
 flex-direction: column;
 justify-content: space-between;
}

.item .ok {
 width: 60px;
 height: 100%;
 padding-right: 20rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #98f5ff;
}

.item .img {
 width: 150rpx;
 height: 150rpx;
 padding: 20rpx;
}

.number-wrapper .name {
 margin: 10rpx 10rpx 10rpx 10rpx;
 font-size: 39rpx;
 overflow: hidden;
}

.number-wrapper .count-wrapper {
 display: flex;
 align-items: center;
 margin-left: 10rpx;
 font-size: 25rpx;
}

.number-wrapper .count-wrapper .decrease-btn {
 font-size: 30rpx;
}

.number-wrapper .count-wrapper .increase-btn {
 font-size: 30rpx;
}

.number-wrapper .count-wrapper .count {
 margin: 0 1rpx 0 1rpx;
 font-size: 30rpx;
}

.number-wrapper .price-wrapper .people {
 margin-left: 250rpx;
 font-size: 30rpx;
}

/* 搜索框样式 */

.view-search {
 display: flex;
 flex-direction: row;
 height: 70rpx;
 margin: 20rpx;
 padding: 5rpx;
 border: 1px #e4e2e2 solid;
 border-width: thin;
 align-items: center;
}

.input {
 flex: 1;
 height: 60rpx;
}

.input-placeholder {
 color: #999;
}

.button {
 width: 60rpx;
 height: 60rpx;
}
.details{
font-size: 36rpx;
color:red;
}

index.js

//index.js
//获取应用实例
var app = getApp();
var cardTeams;
Page({
 data: {
 cardTeams: [{
  "viewid": "1",
  "imgsrc": "https://13373313365.com/image/1.png",
  "price": "¥1245",
  "count": "为什么说 C 语言比 Java 难? ",
  "name": "为什么说 C 语言比 Java 难? ",
 }, {
  "viewid": "2",
  "imgsrc": "https://13373313365.com/image/1.png",
  "price": "¥2345",
  "count": "小程序云开发入门实战总结 ",
  "name": "小程序云开发入门实战总结 ",
 }, {
  "viewid": "3",
  "imgsrc": "https://13373313365.com/image/3.png",
  "price": "¥2345",

  "count": "node.js写一个小爬虫 ",
  "name": "node.js写一个小爬虫 ",
 }, {
  "viewid": "4",
  "imgsrc": "https://13373313365.com/image/3.png",
  "price": "¥2345",
  "count": "推荐一个前端开源项目 ",
  "name": "推荐一个前端开源项目 ",
 }
 ]
 },
 onLoad: function () {
 // console.log('onLoad:' + app.globalData.domain)
 }
})

详情页面

details.wxml

<web-view src="{{url}}"></web-view>

details.js

Page({
 data: {
 url:'',
 //下面是先进行存储的不同产品数据;
 productsList: [
  { showDesc: 'https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247485838&idx=1&sn=1208bcca91141b2c16c2e844efb67a41&chksm=eaef2ebedd98a7a8720092c3f2e87a7f3514d2140bdb7dea289d389aacdc55d268285897872b&token=1964115409&lang=zh_CN#rd' },

  { showDesc: 'https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247485869&idx=1&sn=7e4cedf5230c930cf18c9aa4683d1a43&chksm=eaef2e9ddd98a78bcd55835cba8e31f886df27319be99ac4710a0eace7fc8f196e081b03ad11&token=1964115409&lang=zh_CN#rd' },
 
  {showDesc: 'https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247485900&idx=1&sn=5aa1e6028f6499a611fff1ec2a641bf6&chksm=eaef2efcdd98a7eaeb618e687ed3f36cf5f9085779e0a130a8515ce46d8a444b08595dc15994&token=1964115409&lang=zh_CN#rd' },

  { showDesc: 'https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247485848&idx=1&sn=af73f05a22febcb4dfae60b197a6ca8e&chksm=eaef2ea8dd98a7bee88721a853d7dfce17387d11a371ba27295bec502b2f7ea76b2fd6faf34c&token=1964115409&lang=zh_CN#rd' },

 ]
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 var goodsId = options.goodsId;
 console.log(goodsId)
 this.setData({
  url: this.data.productsList[goodsId].showDesc
 });
 }
})

样式可以自己进行优化,然后其中的道理就不一一细说了,根据index点击的列表的id判断所对应的url即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
javascript date格式化示例
Sep 25 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
js实现不重复导入的方法
Mar 02 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
vue实现扫码功能
Jan 17 Javascript
react基本安装与测试示例
Apr 27 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 #Javascript
js实现无缝滚动双图切换效果
Jul 09 #Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 #Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 #Javascript
bootstrap datepicker的基本使用教程
Jul 09 #Javascript
JavaScript常用内置对象用法分析
Jul 09 #Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 #Javascript
You might like
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
php目录操作实例代码
2014/02/21 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php实例化一个类的具体方法
2019/09/19 PHP
超清晰的document对象详解
2007/02/27 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
理解javascript正则表达式
2016/03/08 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
必须要使用游标的SQL语句有那些
2012/05/07 面试题
车间操作工岗位职责
2013/12/19 职场文书
出国留学计划书
2014/04/27 职场文书
教师节宣传方案
2014/05/23 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
应用心理学专业求职信
2014/08/04 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
材料采购员岗位职责
2015/04/03 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
校运会新闻稿
2015/07/17 职场文书
情人节单身感言
2015/08/03 职场文书