微信小程序入门与实战(4)——阅读详情页面的html/css页面，以及从阅读文章列表页面的数据传送

最新推荐文章于 2023-03-19 16:24:42 发布
最新推荐文章于 2023-03-19 16:24:42 发布
阅读量590 收藏 6
点赞数 2
分类专栏： 微信小程序入门与实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tracy_Yuan2014/article/details/109038992
版权

在这里插入图片描述

html页面

<!--pages/posts/post-detail/post-detail.wxml-->
<view class="container">
  <view class="head-container">
    <image class="audio" src="/img/music/music-stop.png"></image>
    <image class="head-image" src="/img/post/bl.png"></image>
  </view>
  <view class="author-date">
    <image class="avatar" src="/img/avatar/1.png"></image>
    <text class="author">用户名称</text>
    <text class="const-text">发表于</text>
    <text class="date">24小时之前</text>
  </view>
  <text class="title">文章标题</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/img/icon/collection-anti.png"></image>
      <image class="share-img" src="/img/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">文章正文</text>
</view>

css

/* pages/posts/post-detail/post-detail.wxss */
.container{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 0rpx;
}
.head-container{
  width: 100%;
  height: 460rpx;
  position: relative;
}
.head-image{
  width: 100%;
  height: 460rpx;
}
.audio{
  width:102rpx;
  height: 110rpx;
  position: absolute;
  top:50%;
  margin-top: -55rpx;
  left:50%;
  margin-left: -51rpx;
  opacity: 0.6;
}
.author-date{
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
  width: 100%;
  height: 64rpx;
  line-height: 64rpx;
}
.avatar{
  height: 64rpx;
  width:64rpx;
  vertical-align: middle;
  margin-left: 20rpx;
}
.author{
  font-size:30rpx;
  font-weight: 300;
  margin-left: 20rpx;
  vertical-align: middle;
  color:#666;
  
}
.const-text{
  font-size: 24rpx;
  color:#999;
  margin-left: 20rpx;
}

.date{
  font-size: 24rpx;
  margin-left: 30rpx;
  vertical-align: middle;
  color:#999;
}
.title{
  width: 100%;
  padding-left: 50rpx;
  font-size: 36rpx;
  font-weight: 700;
  margin-top: 30rpx;
  letter-spacing: 2px;
  color:#4b556c;
}
.tool{
  margin-top: 20rpx;
}
.circle-img{
  float: right;
  margin-right: 40rpx;
  vertical-align: middle;
}

.circle-img image{
  width: 90rpx;
  height: 90rpx;
}
.share-img{
  margin-left: 30rpx;
}

.horizon{
  width: 660rpx;
  height:1px;
  background-color: #e5e5e5;
  vertical-align: middle;
  position: relative;
  top:46rpx;
  margin: 0 auto;
  z-index: -99;
}

.detail{
  color:#666;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-right: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
  
}

post.detail页面，要根据在post.detail中点击的模块跳转到对应内容的页面
post.wxml

<!--pages/posts/posts.wxml-->
<swiper indicator-dots="{{true}}" vertical="{{false}}" autoplay="{{true}}" intervsl="3000">
  <swiper-item>
    <image src="/img/wx.png" />
  </swiper-item>
  <swiper-item>
    <image src="/img/vr.png" />
  </swiper-item>
  <swiper-item>
    <image src="/img/iqiyi.png" />
  </swiper-item>
</swiper>

<block wx:for="{{postLists}}" wx:for-item="item">
  <view catchtap="onPostTap" data-postId="{{item.postId}}">
    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="../../img/icon/chat.png"></image>
        <text class="post-like-font">{{item.reading}}</text>
        <image class="post-like-image" src="../../img/icon/view.png"></image>
        <text class="post-like-font">{{item.collection}}</text>
      </view>
    </view>
  </view>

</block>

在这里插入图片描述

post.js

// pages/posts/posts.js

import {postLists} from '../../data/data.js'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      postLists
    })
    // console.log(postLists)
  },
  
  //此次新增的代码
  onPostTap(event){
    console.log(event);
    var postId = event.currentTarget.dataset.postid;
    console.log(postId);
    wx.navigateTo({
      url: 'post-detail/post-detail?id='+postId,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

此时打印event，就可以知道为什么要获取event.currentTarget.dataset.postid的值
在这里插入图片描述

然后post-detail.js获取从posts中获取到的postid的值，然后从data.js获取整个实例，然后重新编写posts-detail.wxml

先打桩看看怎么获取posts页面传送过来的postid的值

// pages/posts/post-detail/post-detail.js
import {postLists} from '../../../data/data.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("options:",options);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

在这里插入图片描述
post-detail.js

// pages/posts/post-detail/post-detail.js
import {postLists} from '../../../data/data.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("options:",options);
    
    var postId = options.id;
    var postData = postLists[postId];
    this.setData({
      postData
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

post-detail.wxml

<!--pages/posts/post-detail/post-detail.wxml-->
<view class="container">
  <view class="head-container">
    <image class="audio" src="/img/music/music-stop.png"></image>
    <image class="head-image" src="{{postData.headImgSrc}}"></image>
  </view>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.date}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/img/icon/collection-anti.png"></image>
      <image class="share-img" src="/img/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

在这里插入图片描述

leeeeeenas
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序入门与实战之构建阅读详情页面
Lbsssss的博客
10-02 1489
由于我们文章详情页是可以由不同文章点击进来的，所以我们需要有文章的唯一ID号，当用户点击一篇文章后，我们获取到文章的id号，然后传入文章详情页。那我们怎么在文章详情页获取到文章的id号呢？dataset在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。
微信小程序—自定义相机
WeiHan_Seven的博客
03-07 3074
小程序自定义相机？其实有些名不副实，因为小程序给提供的接口简单到不能再简单，不给你丝毫修改的机会，能做的不过是在相机上覆盖cover-view、cover-image、canvas之类的，来提升相机的拍照体验。今天说的这个自定义相机是除了增加拍照之前的体验之外，拍照之后也增加了图片的处理，如下 效果： 效果说明： 将一张png覆盖在相机上，拍照后，将这张图片与所拍摄照片通过canvas直接拼接，...
(二)小程序的TabBar
qq_46291735的博客
03-19 1381
实现自定义 Tabbar 的效果，让小程序的页面导航更加符合我们的需求
微信小程序蒙板
强者惜字如金，弱者废话连篇！
12-21 623
微信小程序蒙板：https://www.jb51.net/article/170182.htm
小程序之自定义拍照
胖蛋蛋的博客
12-04 716
小程序之自定义拍照 首先预览一下效果图，是否是大家想要的效果图 实现功能主要用了哪些内容 camera：系统相机 cover-view：覆盖在原生组件之上的文本视图。 视图代码 wxml <view class="waper flex-align-center"> <view class="noticeTXT">请将身份证正面放入框内</view...
微信小程序自定义底部tabBar按钮
Twinkle_sone的博客
02-23 1298
微信小程序自定义底部tabBar按钮 1、wxml页面代码 <!-- --------------------------tab页--------------------------- --> <!-- 通过tabind来控制页面的显示和隐藏 --> <view wx:if="{{tabind == 0}}"> page0 </view> <view wx:if="{{tabind == 1}}"> page1 </view>
微信小程序文章详情页面实现代码
10-18
主要介绍了微信小程序文章详情页面实现代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序开发实战&电影小程序之（2）——阅读页面轮播图-新闻列表页面构建
03-29
今天打开微信官方文档发现轮播图组件更新了两个功能，但是目前暂未启用，估计过几天就能使用了。 属性名 类型 默认值 说明 indicator-color Color rgba(0,0,0,.3) 指示点颜色 （这个属性目前暂未启用） indicator-...
微信小程序从子页面退回父页面时的数据传递
03-29
我们知道，在微信小程序中，从一个页面转到另一个页面，一般情况下可以通过navigate或redirect时候的url来携带参数，然后在目标页面的onLoad函数参数中获取这些url参数。例如： // 源页面A相关代码 wx.navigateTo({ ...
微信小程序入门《三》详情页面，上滑加载下拉刷新
03-29
前两章基本完成文章列表页面的UI界面和数据加载，这章介绍内容详情页面的加载和布局。有了之前的知识储蓄，这章就容易多了。废话不多说。  首先是服务端代码，通过id查询数据：接口...
微信小程序自定义底部导航栏原生语法
08-10
微信小程序自定义底部导航栏（原生语法）
微信小程序入门（四）详情页面
03-29
前三章基本完成文章列表页面的UI界面和数据加载，这章介绍内容详情页面的加载和布局。有了之前的知识储蓄，这章就容易多了。废话不多说。 首先是服务端代码，通过id查询数据：接口 ...
微信小程序图片流动动画效果（附代码，图）
qq_51297987的博客
03-18 6646
微信小程序图片流动动态效果代码方法
微信小程序css3动画怎么写,微信小程序CSS3动画下拉菜单效果
weixin_35867815的博客
08-03 284
微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个思路利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使用CSS3动画逐渐改变外层view元素的高度，当高度为0时，里面嵌套的列表元素被完全隐藏，相当于菜单关闭。而当view元素的高度大于列表元素的高度时，相当于菜单显示。效果图wxmlbutton按钮用于触发菜单的打开和关闭，first_c...
微信小程序实战六：自定义相机界面
博主逸尘
10-20 1891
文章目录1.界面效果2.界面布局3.页面逻辑实现4.页面样式5.底部图片下载 1.界面效果 说明：底部第一个按钮返回，底部第二个按钮拍照，底部第三个按钮前置摄像头与后置摄像头切换，此功是自拍，默认是前置摄像头，注意图片二是随便加载的一个网络图片路径，可理解为拍照后返回的图片。 2.界面布局 <template> <view> <view v-if="isTakePhoto"> <camera :device-position="convert" fl
微信小程序手指拖动 出现滑动下拉效果
爬楼梯的前端小白的博客
07-03 959
该效果类似于电商小程序左侧滑动下拉的效果 scroll-y属性：允许纵向y轴滑动 scroll-x属性：允许横向x轴滑动 注意！使用竖向滚动时 必须给scroll-view一个固定高度 制作滚动效果图 wxml部分： <scroll-view class="gundong" scroll-y> <view>a</view> <view>b</view> <view>c</view> </scro
【记录】微信小程序实现九宫格图片拖拽
未来可期
09-15 4112
实现原生小程序图片上传、预览、拖拽换位置
小程序实现拖拽功能
前端_李嘉豪
09-23 1998
<view class='collectBox' bindtap='addCollect' wx:if="{{write[0]+write[1] > 0}}" bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}p...
android自定义微信浮窗展开动画,微信小程序实现点击滑动展开效果动画
weixin_36318548的博客
05-26 491
jslet animationShowHeight = 300;Page({/*** 页面的初始数据*/data: {animation: ''},// 下来btnClick: function () {var animation = wx.createAnimation({transformOrigin: "50% 50%",duration: 1000,timingFunction: "eas...
微信小程序在线阅读系统微信小程序设计与实现.docx
最新发布
08-16
微信小程序在线阅读系统的设计与实现不仅涉及前端用户体验设计，还包含了后端技术选型、数据库管理以及系统架构设计等多个层面，是一个结合了技术创新与实际应用的综合性项目。 总结起来，本文深入剖析了在微信小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值