用小程序完成简单的详情列表功能

Posted 她有多难忘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用小程序完成简单的详情列表功能相关的知识,希望对你有一定的参考价值。

最近学习了微信小程序,写了一个详情列表

主要思路是:

1.先通过接口拿到数据,在onLoad(options)中调用wx.request()函数,获取到数据
2.完成数据渲染后,,用catchtab给它绑定一个点击事件,点击的时候跳转路由同时把id传到详情页,调用另一个接口拿到详情数据
3.在以上工作都完成后,还有一个上拉触底获取到新数据更新到页面上的功能,在这个函数中再次调用获取数据时的代码,然后传一个页码,用来获取新的数据,把新的数据放到旧的数组里,就实现了。

具体如下
如下图:

在js文件中的 onLoad(options) 中调用wx.request()函数该函数有两个必传的参数是,url(接口地址),method(传参方式有get和post两种),然后success:res=>获取到数据

// 生命周期函数--监听页面加载
onLoad(options) 
    wx.request(
      url: 'http://localhost:8989/getData',
      method:"GET",
      success:res=>
        this.setData(
          newList:res.data,
        )
        // console.log(res.data);
      
      
    )
  ,

拿到数据后在页面上渲染,在小程序中渲染数据与vue不一样了,这里要用wx:for="newList" wx:key="key"来循环数据,默认是item

<view>
  <view class="box" wx:for="newList" wx:key="key" >
      <view class="box_one" catchtap="tiaoxq" data-id="item.id" id="item.id">
        <view class="box_one_img">
           <image class="box_img" src="item.imgUrl"></image>
        </view>
        <view class="box_one_text">
          <text class="box_txt_one">item.title</text>
          <text class="box_txt_two">item.newTime</text>
        </view>
      </view>
      

  </view>
</view>

数据渲染完成后,简单写一下样式,然后绑定一个点击事件,随便把id传过去,先打印一下这个id看看是否一致

tiaoxq(e)
    // console.log(e.currentTarget.dataset.id);
    var id =e.currentTarget.dataset.id
    // console.log(id);
    wx.navigateTo(
      url: `/pages/getgetDetail/index?id=$id`,
    )
  ,

打印一下e(这里的e指的是ement)发现id在currentTarget.dataset中,然后声明一个变量存一下,通过路由传参传到详情页

在详情页接收这个id
然后传到详情的接口中拿详情的数据,渲染到页面就完成了

onLoad(options) 
    var id = options.id
    // console.log(id);
    wx.request(
      url: `http://localhost:8989/getDetail?id=$id`,
      method:"GET",
      success:res=>
        this.setData(
          xqList:res.data,
        )
        // console.log(res.data);
      
      
    )
  ,

在这两个功能完成后,还剩下一个上拉触底更新数据,想要实现这个功能要先在app.json文件中加一个"onReachBottomDistance":10上拉10px是触发这个onReachBottom()函数,在这个函数中再次调用获取数据时的代码,然后传一个页码,用来获取新的数据,把新的数据放到旧的数组里,就实现了

onReachBottom() 
    this.data.p++
    wx.request(
      url: `http://localhost:8989/getData?p=$this.data.p`,
      method:"GET",
      success:res=>
        this.setData(
          newList:[...this.data.newList,...res.data],
        )
        // console.log(...res.data);
        //  console.log(this.data.newList);
      
    )
  ,

这样就实现了一个简单的列表页

ps:小程序新手,勿喷

「小程序JAVA实战」小程序视频列表到详情功能(58)

转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinliebiaodaoxiangqinggongneng57/

目前直接展示的都是详情页面,现在需要完成通过详情可以直接跳转到首页,通过首页点击某个视频,可以跳转到某个视频详情中。源码https://github.com/limingios/wxProgram.git 中No.15

修改首页功能

通过block 索引的方式找到点击的对应视频列表中的其中一个传递给详情页面

 

const app = getApp()

Page({
  data: {
    // 用于分页的属性
    totalPage: 1,
    page: 1,
    videoList: [],
    screenWidth: 350,
    serverUrl: "",
    searchValue:""
  },

  onLoad: function (params) {
    var me = this;
    var screenWidth = wx.getSystemInfoSync().screenWidth;
    me.setData({
      screenWidth: screenWidth,
    });

    var searchValue = params.searchValue;
    var isSaveRecord = params.isSaveRecord;
    if (isSaveRecord == null || isSaveRecord == "" || isSaveRecord == undefined){
      isSaveRecord = 0;
    }

    me.setData({
      searchValue: searchValue,
    });



    // 获取当前的分页数
    var page = me.data.page;
    me.getAllVideosList(page, isSaveRecord);
  },

  getAllVideosList: function (page, isSaveRecord){
    var me = this;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: ‘请等待,加载中...‘,
    });


    wx.request({
      url: serverUrl + ‘/video/showAll?page=‘ + page + "&isSaveRecord =" + isSaveRecord,
      method: "POST",
      data:{
        videoDesc: me.data.searchValue
      },
      success: function (res) {
        wx.hideLoading();
        wx.hideNavigationBarLoading();
        wx.stopPullDownRefresh();

        console.log(res.data);

        // 判断当前页page是否是第一页,如果是第一页,那么设置videoList为空
        if (page === 1) {
          me.setData({
            videoList: []
          });
        }

        var videoList = res.data.data.rows;
        var newVideoList = me.data.videoList;

        me.setData({
          videoList: newVideoList.concat(videoList),
          page: page,
          totalPage: res.data.data.total,
          serverUrl: serverUrl
        });

      }
    })
  },

  onPullDownRefresh: function (params) {
    var me = this;
    wx.showNavigationBarLoading();
    me.getAllVideosList(1,0);

  },

  onReachBottom: function (params){
    var me = this;
    var currentPage = me.data.page;
    var totalPage = me.data.totalPage;

    //判断当前页数和总页数是否相等,如果相同已经无需请求
    if (currentPage == totalPage){
      wx.showToast({
        title: ‘已经没有视频啦~‘,
        icon:"none"
      })
      return;
    }
    var page = currentPage+1;
    me.getAllVideosList(page,0);

},
  showVideoInfo:function(e){
    var me = this;
    var videoList = me.data.videoList;
    var arrIndex = e.target.dataset.arrindex;
    var videoInfo = JSON.stringify(videoList[arrIndex]);
    wx.redirectTo({
      url: ‘../videoInfo/videoInfo?videoInfo=‘ + videoInfo,
    })

  }


})

技术分享图片

详情页面获取传递过来的内容复制src

var videoUtils = require(‘../../utils/videoUtils.js‘)
const app = getApp()
Page({

  data: {
    cover:‘cover‘,
    videoContext:"",
    videoInfo:{},
    videId:‘‘,
    src:‘‘
  },


  showSearch:function(){
    wx.navigateTo({
      url: ‘../videoSearch/videoSearch‘,
    })
  },
  onLoad:function(params){
    var me = this;
    me.videoContext = wx.createVideoContext(‘myVideo‘, me);
    var videoInfo = JSON.parse(params.videoInfo);
    me.setData({
      videId: videoInfo.id,
      src: app.serverUrl + videoInfo.videoPath,
      videoInfo: videoInfo
    })

  },
  showIndex:function(){
    wx.redirectTo({
      url: ‘../index/index‘,
    })
  },

  onShow:function(){
    var me = this;
    me.videoContext.play();
  },
  onHide:function(){
    var me = this;
    me.videoContext.pause();
  },
  upload:function(){
    videoUtils.uploadVideo();
  }
})

技术分享图片

PS: 页面的跳转传值在html和jsp开发中也比较普遍,千万不要有老铁通过缓存的方式传值,可以是可以但是不清晰了。

以上是关于用小程序完成简单的详情列表功能的主要内容,如果未能解决你的问题,请参考以下文章

用小程序·云开发打造运动圈小程序丨实战

Sketch工具集「Kitchen」正式发布2.9.0版本/现在可以用小程序买宜家的东西了!

小程序 toggle ,列表的展现和隐藏

小程序物流详情展示的实现

小程序物流详情展示的实现

小程序再次大升级:一号旺铺让你能用小程序打开小程序