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


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获取当前ip的代码
May 10 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
了解javascript中的Dom操作
May 27 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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中的常用魔术方法总结
2013/08/02 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Python函数学习笔记
2008/10/07 Python
Python功能键的读取方法
2015/05/28 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
名片管理系统python版
2018/01/11 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python中的TCP socket写法示例
2018/05/11 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
住宅质量保证书
2014/04/29 职场文书
2016新年感言
2015/08/03 职场文书
体育教师研修感悟
2015/11/18 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python