小程序快速入门到项目开发 8 (列表展示，数据传递，页面跳转)

大家好，我是 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中的组件等的其他，适用版本等各种问题，我们想使用任何东西，仅仅按照组件和api添加就可以。

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

程序职场

发布了55 篇原创文章 · 获赞 101 · 访问量 34万+

私信关注