微信小程序商品到详情的实现


Posted in Javascript onJune 27, 2017

微信小程序商品到详情结构代码资源分享给大家.

商品页

post.wxmldata-postid="{{index}}view class="container" 
swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" 
indicator-active-color="rgba(255,255,255,1)" autoplay swiper-item image src= ...

商品页 post.wxml

data-postid="{{index}}
 
<view class="container">
<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)" autoplay>
<swiper-item>
<image src="/dist/images/wx.png"></image>
</swiper-item>
<swiper-item>
<image src="/dist/images/vr.png"></image>
</swiper-item>
<swiper-item>
<image src="/dist/images/iqiyi.png"></image>
</swiper-item>
</swiper>
<view class="article-list">
<view class="article" wx:for="{{postList}}" wx:for-item="article" wx:key="index" catchtap="goDetail" data-postid="{{index}}">
<view class="article-author-date">
<image src="{{article.avatar}}" class="article-author"></image>
<text class="article-date">{{article.date}}</text>
</view>
<text class="article-title">{{article.title}}</text>
<image src="{{article.imgSrc}}" class="article-image"></image>
<text class="article-content">
{{article.content}}
</text>
<view class="article-link">
<image src="/dist/images/icon/chat1.png"></image>
<text>{{article.collection}}</text>
<image src="/dist/images/icon/view.png"></image>
<text>{{article.reading}}</text>
</view>
</view>
</view>
</view>

post.js

en对象获取postid

var postData = require ("../../data/posts-data.js");
Page({
onLoad:function(){
this.setData({
postList:postData.postList
})
},
 
goDetail:function(en){
 
var postid = en.currentTarget.dataset.postid;
wx.navigateTo({
url:"post-detail/post-detail?postId="+postid
})
}
})

商品详情页 post-detail.js

用option接收postid 

var postData = require("../../../data/posts-data.js");
Page({
onLoad:function(option){
console.log(option);
}
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
微信小程序的分类页面制作
Jun 27 #Javascript
JS实现批量上传文件并显示进度功能
Jun 27 #Javascript
angular过滤器实现排序功能
Jun 27 #Javascript
详解AngularJS ng-class样式切换
Jun 27 #Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
JavaScript事件方法(实例讲解)
Jun 27 #Javascript
简单谈谈原生js的math对象
Jun 27 #Javascript
You might like
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
网上抓的一个特效
2007/05/11 Javascript
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JS重要知识点小结
2011/11/06 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python strip()函数 介绍
2013/05/24 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
django框架使用方法详解
2019/07/18 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
便利店投资的创业计划书
2014/01/12 职场文书
暑期培训随笔感言
2014/03/10 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
贫困证明书范文
2015/06/16 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
python图像处理 PIL Image操作实例
2022/04/09 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle