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

 更新时间:2017年06月27日 09:38:13   投稿:lqh  
这篇文章主要介绍了微信小程序商品到详情的实现的相关资料,需要的朋友可以参考下

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

商品页

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);
}
})

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

相关文章

  • lodash内部方法getFuncName及setToString剖析详解

    lodash内部方法getFuncName及setToString剖析详解

    本篇章我们主要是通过了解lodash里的两个内部方法getFuncName方法和setToString方法,在实际开发中我们也可以借鉴方法的实现思路,在需要的时候简单封装一下,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JavaScript ES新特性块级作用域

    JavaScript ES新特性块级作用域

    这篇文章主要介绍了JavaScript ES新特性块级作用域,所谓的块级作用域,就是该变量只能在声明时的代码块或者子代码块中使用,使JavaScript出现了块级作用域,具体详细内容请参考下面文章内容
    2021-12-12
  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解

    这篇文章主要介绍了微信小程序 上传头像的实例详解的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下
    2017-10-10
  • 超越Node.js的JavaScript运行环境Bun.js功能特性详解

    超越Node.js的JavaScript运行环境Bun.js功能特性详解

    这篇文章主要为大家介绍了超越Node.js的JavaScript运行环境Bun.js功能特性详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 在博客园博文中添加自定义右键菜单的方法详解

    在博客园博文中添加自定义右键菜单的方法详解

    本文是DOM鼠标事件的一个实际应用。查看博客园的博客文章时,有的文章非常长,却没有回到顶部按钮;而且文章的点赞和评论都在文章最底部,使用时并不方便。所以使用自定义右键菜单来实现回到顶部、点赞、评论这三个主要功能,需要的朋友可以参考下
    2020-02-02
  • Web Components实现类Element UI中的Card卡片

    Web Components实现类Element UI中的Card卡片

    这篇文章主要为大家介绍了Web Components实现类Element UI中的Card卡片实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Fabric.js 保存自定义属性方法示例

    Fabric.js 保存自定义属性方法示例

    这篇文章主要为大家介绍了Fabric.js 保存自定义属性方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • package.json中browser module main字段优先级对比

    package.json中browser module main字段优先级对比

    这篇文章主要介绍了package.json中browser module main字段的优先级详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)

    小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)

    这篇文章主要介绍了小程序开发页面窗口定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信小程序 PHP后端form表单提交实例详解

    微信小程序 PHP后端form表单提交实例详解

    这篇文章主要介绍了微信小程序 PHP后端form表单提交实例详解的相关资料,需要的朋友可以参考下
    2017-01-01

最新评论