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

你好，【程序职场】专注于：Spring Boot ，微服务 和 前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索 副业赚钱渠道，在提升技术的同时我们一起交流 敏捷流程 提高工作效率，从技术到管理一步步提升自我！
 
标签：一个执着的职场程序员！

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

 

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