小程序（八）列表展示，数据传递，页面跳转
2021-08-05 18:34:00

 

大家好，我是 andy(陈)

 

上篇文章介绍了小程序网络通讯和数据解析；本篇文章接着上篇内容继续为大家介绍小程序的其它特性使用（有些未必是很复杂的功能，但是是项目开发中使用的基本操作，本文也会介绍），本文针对功能点做特殊实例讲解，特别详细的整体使用我们会在其它的文章中来展开说明。

 

 

 

1. 数据列表展示

• message.wxml

 

通过message.wxml 设置界面的展示效果 

 

•  

<view class="container">    <block wx:for="{{list}}" wx:key="key">        <view class="brand_item" data-id='{{index}}' catchtap='onlineClick'>            <icon class="pic" style="visibility:{{item.isRead == 1 ? 'hidden' : 'visible'}}"></icon>            <view class="right_cont">                <text class="name">{{item.name}}</text>                <text class="time">{{item.cate_sname}}</text>            </view>        </view>        <!-- </navigator> -->    </block></view>

 

 

• message.wxss

 

通过messagewxss文件设置界面的布局位置

•  

page{    background: #fff;    font-size: 14px;}.container .brand_item{    display: flex;    align-items: center;    justify-content: center;    border-bottom: 1px solid #e4e4e4;    padding-top: 10px;    padding-bottom: 10px;    width: 100%;}.container .brand_item .pic{    display: block;    width: 10px;    height: 10px;    margin: 10px;    border-radius: 100%;    background-color: #f7bc92;}.right_cont{    display: flex;    flex-direction: column;    padding-right: 10px;    width: 90%;}.right_cont .name{    overflow: hidden;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    text-overflow: ellipsis;    color: #353f41;    font-size: 32rpx;    width: 100%;    float: left;}    .weui-loadmore {    width: 65%;    margin: 1.5em auto;    line-height: 1.6em;    font-size: 14px;    text-align: center;  }    .weui-loadmore__tips {    display: inline-block;    vertical-align: middle;  }   .right_receive{    display: flex;    flex-direction: row;  }   .right_receive .time{    position: relative;    color: #778ea6;    width: 70%;    float: left;    margin-top: 10rpx;    font-size: 24rpx;}

 

 

• message.json

 

 

•  

{  "navigationBarTitleText": "消息",  "enablePullDownRefresh": true,  "backgroundColor": "#f8f8f8"}

 

 

• message.js

 

通过message.js中的访问接口，获取列表数据（调用的接口参照上一章 网络通讯）

•  

/**  * 访问请求接口  */  requestData: function () {    let that = this    let param = {      "size":10,      "page":1    }    util.getReq('https://api.apiopen.top/musicBroadcasting', param, function (res) {      console.debug(res);      wx.hideLoading()      if (res.code == 200) {        if (null != res.result[0].channellist && res.result[0].channellist != "") {            that.setData({              list: res.result[0].channellist,              totalPage: 1,            })          } else {            that.setData({              isHideNoMore: false            })          }       } else {              }    })  },

 

 

2. 数据传递

获取数据并传递数据设置

 

•  

 //点击每一行进入详情，带入数据 name  onlineClick: function (e) {    var that = this;    //获取下标    var index = e.currentTarget.dataset.id;//获取数据列表的下标    console.log(index)    var name = this.data.list[index].name;//获取名称信息，传递      wx.navigateTo({        url: 'detail/msgadetail?con=' + name  //设置跳转的界面 绝对路径和参数拼接      })  },

 

获取传递的数据

 

接收数据 需要在 detail目录下的msgdetail文件中获取

 

 

•  

/**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    // 详情    var that = this;    wx.setNavigationBarTitle({//设置传递的数据作为标题显示      title: options.con,//options.con 为获取的传递的数据    })  },

 

 

3. 界面跳转

1. wx.navigateTo({}) ，保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回

 

 

•  

wx.navigateTo({      url:'../test/test?id=1&page=4',  //跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀      success:function(){}        //成功后的回调；      fail：function(){}          //失败后的回调；      complete：function(){}      //结束后的回调(成功，失败都会执行)  })    传递的参数在接收页面onLoad()函数中得到值：option.id就可以得到了  onLoad: function (option) {　　　　console.log(option)//可以打印一下option看查看参数     this.setData({         id:option.id,  });

 

 

2. wx.redirectTo() , 关闭当前页面，跳转到非tabBar的某个页面

3. 使用组件  <navigator>

 

•  

<navigator url='../test/test'>点击跳转</navigator>

4. wx.switchTab ，跳转到tabBar的某个页面

 

 

•  

wx.switchTab({      url: '../taste/index',   //注意switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面    })

 

 

 

4. 返回上一页数据参数传递

•  

 goback: function () {     let city = '你好';    let id = 1;    let pages = getCurrentPages()    let prePage = pages[pages.length - 2]  //上一个界面    prePage.setData({      addresCon: city,      cityid: id    })    wx.navigateBack({});//返回上一页   },

5.隐藏和显示效果

•  

<view class="container">    <block wx:for="{{list}}" wx:key="key">        <view class="brand_item" data-id='{{index}}' catchtap='onlineClick'>            <icon class="pic" style="visibility:{{item.isRead == 1 ? 'hidden' : 'visible'}}"></icon> //判断isRead是否隐藏            <view class="right_cont">                <text class="name">{{item.name}}</text>                <text class="time">{{item.cate_sname}}</text>            </view>        </view>        <!-- </navigator> -->    </block></view>

总结

使用小程序可以非常方便、快速开发小程序，我们不用关心api中的组件等的其他，适用版本等各种问题，我们想使用任何东西，仅仅添加一个配置就可以。

附演示demo地址：https://github.com/chenjianpeng/project/tree/master/demo2

 

 

 

 

 

- End -

 

 

 

长按二维码关注

期待您的加入

▽

 

 

 

 

 

 

 

资源整理:
包括不限于Java、Python、Linux、前端、人工智能、架构、大数据、电子书 ，移动端，小程序，项目等