小程序新闻列表渲染 及点击标题展示详情

博客参考：

https://blog.csdn.net/qq_36901488/article/details/82347802

 

details.wxml 代码：

<!--pages/details/details.wxml-->
<block wx:for="{{article}}" wx:key="index">
<view class="box">
<view>作者:{{item.author}}</view>
//绑定冒泡事件，点击标题获取详情
<view bindtap="onclick" data-id="{{item.id}}">标题:{{item.title}}</view>
<view>内容:{{item.content}}</view>
<view class="img">

<image src="/images/stamp.png"></image> {{33}}

<image src="/images/help.png"></image> {{item.help}}
</view>
</view>
</block>

渲染数据的效果图：

 

 

 details.wxss代码：

/* pages/details/details.wxss */


.box{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    padding-top: 5px;
}
.box view{
    padding-top: 15px;
}
.img >image{
    width: 50rpx;
    height: 50rpx;
}

 details.wxjs代码：

// pages/details/details.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
// 接受 this.setData 传过来的数据
        article:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 请求数据
    wx.request({
        // 网址
    url: 'http://www.day.com/week2/article/index',
    method:'POST',
    // 结果
    success:(res)=>{
    var info=res.data.data.data
// 逻辑层刷新值视图层
    this.setData({
        article:info
    })

    }
    })



    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },
    // 页面详情，点击标题进行触发
    onclick(evt){
        // 获取id
        var id=evt.target.dataset.id
        // 携带id至detailsOne页面
        wx.navigateTo({
          url: '/pages/detailsOne/detailsOne?id='+id,
        })
     
    }
})

php 后端请求数据

model代码：

<?php

namespace app\week2\model;

use think\Model;

class ArticleModel extends Model
{
    //
    protected $table = "article";

//    数据库列表展示
    public static function listData()
    {
        return self::paginate(5);
    }

//    数据标题详情
    public static function details($id)
    {
        return self::find($id);
    }


}

controller代码：

<?php

namespace app\week2\controller;

use app\api\model\ArticleModel;
use think\Controller;
use think\Request;

class Article extends Controller
{
    /**
     *
     *文章列表页
     * @return \think\Response
     */
    public function index()
    {
        //
        $data = \app\week2\model\ArticleModel::listData();
        return json(['code' => 200, 'message' => 'ok', 'data' => $data]);
    }

 
    /**
     * 显示详情页
     *
     * @param int $id
     * @return \think\Response
     */
    public function read()
    {
        //数据库提取数据
       $id=input('id');

//       根据id获取详情
       $detailsData=\app\week2\model\ArticleModel::details($id);
//       返回json格式
       return json(['code'=>200,'message'=>'ok','data'=>$detailsData]);
    }

   
}

点击标题实现详情操作，首先给页面点击事件，需要数据的id，方便数据查询

 

 

 

 

 js 中触发点击

 

 

 

detailsOne.js

// pages/detailsOne/detailsOne.js
  
   
Page({

    /**
     * 页面的初始数据
     */
    data: {
//接受this.setData传过来的数据，进行页面渲染
        detailsOne:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 接受details 传过来的id
        // console.log(options.id);
        let id =options.id
        // ajax 根据id请求后端数据，后端根据id进行sql语句的查询
  wx.request({
        url: 'http://www.day.com/week2/article/read',
        data:{
            id:id
        },
        success:(res)=>{
    //    console.log(res.data.data);
    let info=res.data.data
// 逻辑层传至视图层(data),detalsOne 进行渲染
    this.setData({
        detailsOne:info
    })

      }
      })
    },
})

根据id传送至php控制器，由id进行查询，代码上头有，这里就进行截图啦

 

 

 

 接受到数据传至data{}，前往detailsOne.wxml  进行渲染即可。。

detailsOne.wxml  

<!--pages/detailsOne/detailsOne.wxml-->
<text>pages/detailsOne/detailsOne.wxml</text>

<view class="box">
<view>作者:{{detailsOne.author}}</view>
<view bindtap="onclick" data-id="{{detailsOne.id}}">标题:{{detailsOne.title}}</view>
<view>内容:{{detailsOne.content}}</view>
<view class="img">


<image src="/images/stamp.png"></image> {{detailsOne.stamp}}

<image src="/images/help.png"></image> {{detailsOne.help}}

</view>


</view>