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

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

商品页

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

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

(0)

相关推荐

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

    微信小程序商品到详情结构代码资源分享给大家. 商品页 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=

  • 微信小程序商品详情页规格属性选择示例代码

    detail.wxml展示页面 <!--轮播图--> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &

  • 微信小程序商品详情页的底部弹出框效果

    电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式 1.js代码(一般情况下只调用显示对话框的函数,当点击对话框外部的时候,对话框可以消失) //显示对话框 showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.anim

  • 微信小程序商品详情页底部弹出框

    电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式 1.js代码(一般情况下只调用显示对话框的函数,当点击对话框外部的时候,对话框可以消失) //显示对话框 showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.anim

  • 微信小程序如何实现商品列表跳转商品详情页功能

    目录 引言 1.1实现首页页面 2.1实现调跳转到手机详情页 总结 引言 模仿京东小程序,实现下列功能 首页包含了手机图片,手机的描述,手机的价格,购物车图标 首页显示两行文字,多余的文字隐藏,以3个点代替 点击页面不同的地方,能够跳转到不同的手机详情页面 手机详情页包含手机图片,上架日期,价格,手机描述等图文信息** 1.1实现首页页面 效果如下图 代码如下:其中js页面代码包含了跳转 <!--index.wxml--> <view class="container"

  • 微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价)

    目录 1.goods.wxml代码 2.goods.wxss代码 3.goods.js代码 4.时间转化js代码 完整功能和页面 1.goods.wxml代码 <!--商品详情页--> <view class="container"> <scroll-view class="main" scroll-y="true"> <!--顶部轮播图--> <swiper autoplay="t

  • 微信小程序商城项目之商品属性分类(4)

    续上一篇的文章:微信小程序之购物数量加减 -- 微信小程序实战商城系列(3) 所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view> <!--options--> <view class="commodity_a

  • 微信小程序点击列表跳转到对应详情页过程解析

    这篇文章主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 微信小程序实现分享商品海报功能

    我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀该成对应框架前缀即可:) 步骤描述不清晰或者不想看步骤?那就直接访问完整代码地址吧 完整代码演示:微信小程序 - 分享商品海报 相关文档: uni-app官方文档 微信小程序官方文档 第一步:提前将需要分享的图片素材先缓存至本地临时图片路径: initPic(){ this.handleNetImg

  • 微信小程序文章详情页面实现代码

    先自己绘制了一个丑陋的原型图,然后开始在小程序上绘制页面,然后设计样式,一路过来总结就是哪里不懂查哪里之旅~ 原型设计和分析 原型图效果 文章详情.png 为什么要这么设计? 正常情况下是设计先出设计图,然后服务器和我们一同讨论接口如何设计,然后根据服务器返回的结果,我们再去界面上显示.但是这里我们使用的是第三方的接口,所以只能他有什么我们显示什么了. 服务器接口返回的数据如下如: 小程序-服务器返回结果.png 分析 json 结果,我们这里为了简单,也就只显示几个元素分别是 时间,标题,类型

随机推荐