微信小程序入门《三》详情页面,上滑加载下拉刷新

作者:ITDragon龙,原文地址

一:详情页面

前两章基本完成文章列表页面的UI界面和数据加载,这章介绍内容详情页面的加载和布局。有了之前的知识储蓄,这章就容易多了。废话不多说。 
首先是服务端代码,通过id查询数据:接口https://www.itit123.cn/itdragon/findOne controller层 源码

  1. @RequestMapping(value="findOne")
  2. @ResponseBody
  3. public Object edit(@RequestParam(value="id") String id){
  4. try {
  5. WxData wxData = wxDataService.findOne(WxData.class,Long.valueOf(id));
  6. Map<String, Object> resultMap = new HashMap<String, Object>();
  7. resultMap.put("id", wxData.getId());
  8. resultMap.put("title", wxData.getTitle());
  9. resultMap.put("content", wxData.getContent());
  10. resultMap.put("src", wxData.getImageUrl());
  11. resultMap.put("time", wxData.getCreatedDate());
  12. return gson.toJson(resultMap);
  13. } catch (Exception e) {
  14. e.printStackTrace();
  15. }
  16. return null;
  17. }

微信小程序,详情页面:detail.wxml 。变量和list.wxml页面不同,结构是 arg.key 的形式。

  1. <view class="page">
  2. <view class="page__bd">
  3. <view class="weui-article">
  4. <view class="weui-article__h1">{{msgDetail.title}}</view>
  5. <view class="weui-article__section">
  6. <view class="weui-article__section">
  7. <view class="weui-article__h3">{{msgDetail.time}}</view>
  8. <view class="weui-article__p">
  9. {{msgDetail.content}}
  10. </view>
  11. <view class="weui-article__p">
  12. <image class="weui-article__img" src="{{msgDetail.src}}" mode="aspectFit" style="height: 180px" />
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </view>

detail.js:

  1. // pages/detail/detail.js
  2. var app = getApp();
  3. Page({
  4. data:{
  5. msgDetail:{}
  6. },
  7. onLoad:function(options){
  8. var that = this;
  9. app.ajax.req('/itdragon/findOne',{
  10. id: options.id
  11. },function(res){
  12. that.setData({
  13. msgDetail:res
  14. })
  15. });
  16. },
  17. onReady:function(){
  18. // 页面渲染完成
  19. },

  20. 鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    本文作者2017-3-25 00:05
    admin
    粉丝0 阅读10 回复0

    精彩阅读

    排行榜

    小程序互动交流社区
    181-2013-0473
    周一至周五 9:00-18:00
    意见反馈:79354359@qq.com

    扫一扫联系我们