1. 程式人生 > >微信小程式頁面跳轉傳參填充資料的小案例

微信小程式頁面跳轉傳參填充資料的小案例

把index.wxml中data-postid的值,傳給detail.wxml的案例:

目錄結構:

目錄結構
目錄結構

1、在index.wxml中為需要傳值的列表繫結屬性和值,併為該列表繫結一個點選函式:

    <block wx:for="{{newsData}}" wx:for-item="newsItem" wx:key="*this">
      <view class="news-item" data-postid="{{newsItem.listId}}" catchtap="goDetail" >
        <template is="indexTemplate"
data="
{{...newsItem}}" /> </view> </block>

注意:
- indexTemplate 是引用的模板
- data- 後面的屬性不能是 駝峰式(如:postId),必須是小寫的,否則會報錯!!!!
- goDetail是傳參用的函式

2、在index.js中獲取index.wxml中的postid的值,並使用wx.navigateTo({ })傳遞給news-detail.wxml頁面

    var newsDataList = require("../../data/index-data.js"
); Page({ onLoad: function (option) { this.setData({ newsData: newsDataList.dataList }) }, goDetail: function (event) { var postId = event.currentTarget.dataset.postid; wx.navigateTo({ url: 'news-detail/news-detail?id='
+postId }) } })

3、在detail.js中接收index.js頁面跳轉時傳遞過來的值

    // 此頁面也需要引入 本地模擬的資料檔案
    // 在頁面載入時獲取傳遞過來的值,一定要寫引數option
    // dataList 是模擬的本地資料列表,是一個物件
    // 我們需要的是把當前這一項列表中的資料傳遞出去,所以取的是物件中的一個

    var newsDataList = require("../../../data/index-data.js");

    Page({
        onLoad: function(option) {
                var postId = option.id;
                var postData = newsDataList.dataList[postId];
                this.setData({
                    postData: postData
                });
         }
    })

-注意兩個 require 的引用路徑! 不然會跳坑的!

4、在news-detail.wxml進行繫結

        <text class="news-title">{{postData.title}}</text>
        <text class="name">{{postData.name}}</text>

附:模擬資料用的 index-data.js:

    // 模擬的本地資料
    var news_data = [
        {
            listId: "0",
            avatar: "/images/avatar/9.jpg",
            name: "岸芷汀蘭",
            date: "2017年3月5日",
            title: "香港二手樓價再創歷史新高 新一輪升浪有望展開",
            newsImg: "/images/post/fangzhi.jpg",
            content: "有香港二手樓價“風向標”之稱的“中原城市領先指數CCL”再創歷史新高,最新報147.74點,按週上升0.62%,較2015年9月的高點再漲0.56%。其中,大戶型單位價格連升三週,按周升0.56%;中小戶型單位價格創出歷史新高,按周升0.63%。"
        },
        {
            listId: "1",
            avatar: "/images/avatar/10.jpg",
            name: "麵包沒有面包屑",
            date: "2017年2月13日",
            title: "迪麗熱巴十年前舊照曝光",
            newsImg: "/images/post/reba.png",
            content: "近日,有網友通過微博曝光迪麗熱巴10年前廣州演出時的照片,附文稱:“你還記得在廣州的演出嗎?”\n\n照片中,迪麗熱巴身穿一身喜慶的大紅新疆民族服飾,充滿異域風情。\n\n隨後,網友紛紛圍觀並留言稱:“好青澀的時候!”“笑容如陽光!”“笑的好燦爛!”",
            review: "58",
            look: "109"
        }
    ];
    //  \n\n是換行
    module.exports = {
        dataList: news_data
    }

附:indexTemplate模板

    <template name="indexTemplate">
      <view class="user-info">
        <image class="avatar" src="{{avatar}}"></image>
        <text class="name">{{name}}</text>
        <text class="date">{{date}}</text>
      </view>
      <view class="news">
        <text class="news-title">{{title}}</text>
        <image class="news-img" src="{{newsImg}}"></image>
        <text class="news-content">{{content}}</text>
      </view>
      <view class="reviewAndCollect">
        <view>
          <image src="../../images/icon/review.png"></image>
          <text>{{review}}</text>
        </view>
        <view>
          <image src="../../images/icon/look.png"></image>
          <text>{{look}}</text>
        </view>
      </view>
    </template>

相關推薦

程式頁面填充資料案例

把index.wxml中data-postid的值,傳給detail.wxml的案例: 目錄結構: 1、在index.wxml中為需要傳值的列表繫結屬性和值,併為該列表繫結一個點選函式:

程式頁面

在需要頁面之間傳遞多個引數的時候,需要用&連結起來,上一頁的正確跳轉程式碼如下: var that = this; wx.navigateTo({ url: '../../pages/myListDetail/myListDetail?idx=' + that.data.curr

三十七、程式頁面引數值為url時引數丟失

當引數的值為url的時候,在options中的值沒有引數“?”之後字串被擷取。例如:let url="http://baidu.com/?a=1&b=2"wx.navigateTo({url: `detail?url=${url}`})可以使用encodeURIComponent():函式可把字串作為

程式頁面-this和that的區別-登入流程-下拉選單-實現畫布自適應各種手機尺寸

小程式頁面跳轉傳參 根目錄下的 app.json 檔案 頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab { "pages": [ "pages/index/index", "pages/logs/index" ], "window":

程式頁面包含連結地址方案

場景: 如: A介面傳參 let webUrl ='http://www.ca.com?a=45&dd=23' wx.navigateTo({ url: '../../partials/chating/chating?webUrl=webUrl

程式頁面值以及獲取值方法

在安卓中頁面跳轉傳值都是通過bundle,現在研究一下小程式的列表跳轉及頁面傳值。 my.wxml <view class="container"> <view bindt

程式 路由wx.navigateTo ,字串物件報錯

官方文件地址:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html (一)問題   看了文件之後,傳一個引數沒有問題,就是如果你路由跳轉想傳物件,必須將物件轉換成字串, J

程式頁面與事件繫結,

1.頁面跳轉 : wx.navigateTo 頁面重定向 : wx.redirectTo PS:通過這兩種所到達的頁面,即使它是定義在tabBar配置中的頁面,也不會顯示底部的tab欄.2.事件分類:事件分為冒泡事件和非冒泡事件冒泡事件:當一個元件上的事件被觸發後,該事件會

程序——頁面

小程序 func data url ont bsp 需要 nav options 比如從index。wxml跳轉到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator> 傳

程式-day03-註冊頁面、路由(程式頁面)、模組化

1.路由 wx.navigateTo    開啟新頁面 wx.redirectTo      頁面重定向 wx.switchTab      切換 Tab

程式 頁面資料傳遞詳解

微信小程式 頁面跳轉及資料傳遞詳解 類似 Android 的 Intent 傳值,微信小程式也一樣可以傳值: 例如:wxml 中寫了一個函式跳轉: ? 1 2 3 4 <view class="itemWeight" catchtap

從零開始學程式開發---5、程式頁面

我們接下來要實現的是:點選“按鈕”,跳轉到另一個頁面 如下圖,當我們點選“開啟小程式之旅”的時候,就會跳轉到news頁面                 首先我們將啟動頁放回pages配置項的第一項

程式頁面方法總結

微信小程式頁面跳轉目前有以下方法(不全面的歡迎補充): 1. 利用小程式提供的 API 跳轉: // 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。 //

微笑程式的幾種方式 程式頁面 的幾種方式

微信小程式頁面跳轉 的幾種方式 最近在做微信小程式,碰到頁面跳轉的問題,總結一下頁面之間跳轉的方式 一、wx.navigateTo(OBJECT)    這是最普遍的一種跳轉方式,其官方解釋為:“保留當前頁面,跳轉到應用內的某個頁面” 類似

程式頁面傳遞引數(實體,物件)

我們要傳遞的實體是object型別 queryItemClick: function (e) { var that = this //拿到點選的index下標 var index = e.currentTarget.dataset.index //將物件轉為st

程式頁面(五)

事件: 微信小程式中任何一個事件,事件繫結時都要在前面加上bind或catch(bind用的較多); 頁面跳轉: wx.navigateTo({       url:"../posts/post",     }); 括號裡面是一個物件。這樣寫會有一個返回,把他當成啟動頁面

程式頁面三種方式

為了不讓使用者在使用小程式時造成困擾,微信小程式規定頁面路徑只能是五層,請儘量避免多層級的互動方式。 頁面跳轉的話就涉及到了多個頁面層級 第一種:wx.navigateTo(OBJECT) 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateB

程式頁面失敗的常見原因

1.第一種常見的原因     忘記在app.json檔案中pages選項中註冊 2. 第二種常見原因     跳轉路徑寫錯 3.第三種原因    如果跳轉的路徑已經在app.json檔案中的TabBa

程式 頁面如何通過url傳遞引數

var fb_id = 132在跳轉地址後wx.naviga在跳轉地址後teTo({ url: `../free/sellers/sellers?fb_id=${fb_id}`, })然後在新頁面通過js獲取資料 onLoad: function (optio

程式頁面無效

wx.navigateTo(OBJECT) 不會銷燬當前頁面,僅僅是將其hide,使用wx.navigateBack可以返回到原頁面。 wx.redirectTo(OBJECT) 銷燬當前頁面,跳轉到應用內的其他頁面。 我們有時候會發現,其他的地方都好好的能跳轉,可是為啥突然就無效那呢? 原因: 檢查你