小程序（八）列表展示，數(shù)據(jù)傳遞，頁(yè)面跳轉(zhuǎn)
2021-08-05 18:34:00

?

大家好，我是 andy(陳)

?

上篇文章介紹了小程序網(wǎng)絡(luò)通訊和數(shù)據(jù)解析；本篇文章接著上篇內(nèi)容繼續(xù)為大家介紹小程序的其它特性使用（有些未必是很復(fù)雜的功能，但是是項(xiàng)目開(kāi)發(fā)中使用的基本操作，本文也會(huì)介紹），本文針對(duì)功能點(diǎn)做特殊實(shí)例講解，特別詳細(xì)的整體使用我們會(huì)在其它的文章中來(lái)展開(kāi)說(shuō)明。

?

?

?

1. 數(shù)據(jù)列表展示

• message.wxml

?

通過(guò)message.wxml 設(shè)置界面的展示效果?

?

• ?

<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

?

通過(guò)messagewxss文件設(shè)置界面的布局位置

• ?

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

?

通過(guò)message.js中的訪問(wèn)接口，獲取列表數(shù)據(jù)（調(diào)用的接口參照上一章 網(wǎng)絡(luò)通訊）

• ?

/**  * 訪問(wèn)請(qǐng)求接口  */  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. 數(shù)據(jù)傳遞

獲取數(shù)據(jù)并傳遞數(shù)據(jù)設(shè)置

?

• ?

 //點(diǎn)擊每一行進(jìn)入詳情，帶入數(shù)據(jù) name  onlineClick: function (e) {    var that = this;    //獲取下標(biāo)    var index = e.currentTarget.dataset.id;//獲取數(shù)據(jù)列表的下標(biāo)    console.log(index)    var name = this.data.list[index].name;//獲取名稱信息，傳遞      wx.navigateTo({        url: 'detail/msgadetail?con=' + name  //設(shè)置跳轉(zhuǎn)的界面 絕對(duì)路徑和參數(shù)拼接      })  },

?

獲取傳遞的數(shù)據(jù)

?

接收數(shù)據(jù) 需要在 detail目錄下的msgdetail文件中獲取

?

?

• ?

/**   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載   */  onLoad: function (options) {    // 詳情    var that = this;    wx.setNavigationBarTitle({//設(shè)置傳遞的數(shù)據(jù)作為標(biāo)題顯示      title: options.con,//options.con 為獲取的傳遞的數(shù)據(jù)    })  },

?

?

3. 界面跳轉(zhuǎn)

1. wx.navigateTo({}) ，保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用 wx.navigateBack 可以返回

?

?

• ?

wx.navigateTo({      url:'../test/test?id=1&page=4',  //跳轉(zhuǎn)頁(yè)面的路徑，可帶參數(shù) ？隔開(kāi)，不同參數(shù)用 & 分隔；相對(duì)路徑，不需要.wxml后綴      success:function(){}        //成功后的回調(diào)；      fail：function(){}          //失敗后的回調(diào)；      complete：function(){}      //結(jié)束后的回調(diào)(成功，失敗都會(huì)執(zhí)行)  })    傳遞的參數(shù)在接收頁(yè)面onLoad()函數(shù)中得到值：option.id就可以得到了  onLoad: function (option) {　　　　console.log(option)//可以打印一下option看查看參數(shù)     this.setData({         id:option.id,  });

?

?

2. wx.redirectTo() , 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到非tabBar的某個(gè)頁(yè)面

3. 使用組件? <navigator>

?

• ?

<navigator url='../test/test'>點(diǎn)擊跳轉(zhuǎn)</navigator>

4. wx.switchTab ，跳轉(zhuǎn)到tabBar的某個(gè)頁(yè)面

?

?

• ?

wx.switchTab({      url: '../taste/index',   //注意switchTab只能跳轉(zhuǎn)到帶有tab的頁(yè)面，不能跳轉(zhuǎn)到不帶tab的頁(yè)面    })

?

?

?

4. 返回上一頁(yè)數(shù)據(jù)參數(shù)傳遞

• ?

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

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>

總結(jié)

使用小程序可以非常方便、快速開(kāi)發(fā)小程序，我們不用關(guān)心api中的組件等的其他，適用版本等各種問(wèn)題，我們想使用任何東西，僅僅添加一個(gè)配置就可以。

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

?

?

?

?

?

- End -

?

?

?

長(zhǎng)按二維碼關(guān)注

期待您的加入

▽

?

?

?

?

?

?

?

資源整理:
包括不限于Java、Python、Linux、前端、人工智能、架構(gòu)、大數(shù)據(jù)、電子書(shū) ，移動(dòng)端，小程序，項(xiàng)目等

?