微信小程式頁面跳轉傳參填充資料的小案例
把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) 銷燬當前頁面,跳轉到應用內的其他頁面。 我們有時候會發現,其他的地方都好好的能跳轉,可是為啥突然就無效那呢? 原因: 檢查你