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


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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
vue中 v-for循环的用法详解
Feb 19 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
js实现html滑动图片拼图验证
Jun 24 Javascript
ant design charts 获取后端接口数据展示
May 25 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
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python 实现微信自动回复的方法
2020/09/11 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
大学生个人求职信范文
2013/09/21 职场文书
大三在校生电子商务求职信
2013/10/29 职场文书
数学教育专业求职信
2014/07/22 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
音乐课外活动总结
2015/05/09 职场文书
党员干部学习心得体会
2016/01/23 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers