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


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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
Vue实现双向数据绑定
May 03 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
如何用JS实现简单的数据监听
May 06 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
七行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
缓存技术详谈―php
2006/12/14 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python求解水仙花数的方法
2015/05/11 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python pycharm的安装及其使用
2019/10/11 Python
python Xpath语法的使用
2020/11/26 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
2014年圣诞节促销方案
2014/03/14 职场文书
感恩教育月活动总结
2014/07/07 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014年司法局工作总结
2014/12/11 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python