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


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的内存管理详解
Aug 07 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
BootStrap中的表单大全
Sep 07 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php字符串过滤与替换小结
2015/01/26 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JS中Location使用详解
2015/05/12 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
在Python的web框架中配置app的教程
2015/04/30 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
python交互式图形编程实例(三)
2017/11/17 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python实现动态数组的示例代码
2019/07/15 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
表彰先进集体通报
2014/01/12 职场文书
上班打牌检讨书
2014/02/07 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
个人培训自我鉴定
2014/03/28 职场文书
2014年学习部工作总结
2014/11/12 职场文书
行政申诉状范文
2015/05/20 职场文书
交通事故代理词范文
2015/05/23 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Spring中的@Transactional的工作原理
2022/06/05 Java/Android