wxml内容:
<view bindtap="a" data-f="{{flag}}">123</view>
<!-- wx:for="{{数组}}" 循环需要绑定key wx:key="index"-->
<!-- 自带定义 item 表示数组的每一项 index 表示数组的索引 -->
<!-- 使用wx:for-item修改每一项值的key -->
<!-- 使用wx:for-index修改每一项值的index -->
<view wx:for="{{list}}" class="t" wx:key="i"
wx:for-item="r" wx:for-index="i"
style="color:{{rstyFlag'red':''}};"
data-i="{{i}}"
bindtap="choose"
>
{{rname}}--{{i}}
</view>
js内容:
data: {
flag:1,
list:['冰墩墩','雪融融','小泡菜'],
list:[{
name:'冰墩墩',
styFlag:true
},{
name:'雪融融',
styFlag:false
},{
name:'小泡菜',
styFlag:false
}]
},
choose:function(e){
let { currentTarget:{ dataset:{i} } } = e;
/ 第一步获取点击的当前的内容的索引 /
consolelog(i)
/ 排他 把所有的先置空 /
thisdatalistforEach(r=>{
rstyFlag = false
})
thisdatalist[i]styFlag = true;
/ 数据变了 视图没变 必须要使用setData实现数据和视图的双向数据绑定 /
thissetData({
list:thisdatalist
})
},
a:function(e){
consolelog(e)
},
效果:
wxml内容:
<button bindtap="go1" style="margin: 3px;">张三</button>
<button bindtap="go2" style="margin: 3px;">李四</button>
<button bindtap="go3" style="margin: 3px;">24号</button>
<button bindtap="go4" style="margin: 3px;">不带参数</button>
<button bindtap="goBack">返回上一级</button>
<!-- wx:if 和 wx:elif 以及wx:else之间不可以被其他的标签打断 -->
<block>
<view wx:if="{{msg=='zhangsan'}}" class="t">欢迎回来主人</view>
<view wx:elif="{{msg=='lisi'}}" class="t">家里水龙头没有坏不要过来</view>
<view wx:elif="{{msg=='24'}}" class="t">您好欢迎为您服务</view>
<view wx:else class="t">显示家里没人</view>
</block>
js内容:
Page({
/
页面的初始数据
/
data: {
msg:""
},
goBack:function(){
wxnavigateBack()
},
/
生命周期函数--监听页面加载
/
onLoad: function (options) {
consolelog(optionsname)
/ 多次使用setData会影响性能 尽量把多次setData 使用一次setData来实现
尽量少的使用setData来提高小程序的性能 /
thissetData({
msg:optionsname
})
/ 如果名字叫张三 页面显示欢迎回来主人 /
/ 如果名字叫李四 页面显示家里水龙头没有坏不要过来 /
/ 如果名字叫24号 页面显示您好欢迎为您服务 /
/ 都不是 显示家里没人 /
},
/
生命周期函数--监听页面初次渲染完成
/
onReady: function () {
},
/
生命周期函数--监听页面显示
/
onShow: function () {
},
/
生命周期函数--监听页面隐藏
/
onHide: function () {
},
/
生命周期函数--监听页面卸载
/
onUnload: function () {
},
/
页面相关事件处理函数--监听用户下拉动作
/
onPullDownRefresh: function () {
},
/
页面上拉触底事件的处理函数
/
onReachBottom: function () {
},
/
用户点击右上角分享
/
onShareAppMessage: function () {
}
})
{
"pages": [
"pages/index/index",
"pages/forpage/forpage",
"pages/mypage/mypage",
"pages/logs/logs",
"pages/fenglei/fenglei"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#FF0000",
"navigationBarTitleText": "kw47page",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#fff",
"selectedColor": "#FFCA28",
"backgroundColor": "#000",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "",
"selectedIconPath": ""
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "",
"selectedIconPath": ""
}]
},
"style": "v2",
"sitemapLocation": "sitemapjson"
}
效果图:
(1)使用本地缓存
(2)通过页面路由
在使用url进行参数传递时候,传递数据有字节限制,如果要传递对象,需要先把对象通过JSONstringify转换成字符串,接收或再通过JSONparse转换成对象
demo
<template is="模板名" data="数据对象" />
A页面跳转到B页面
页面传值
微信小程序 页面传值详解
一 跨页面传值
1 用 navigator标签传值或 wxnavigator, 比如
这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受
如果需要传多个参数, 用 & 链接即可
如果要传 数组, 字典等复杂类型, 要先用 JSONstringify() 转成字符串传递
注 : 如果转化的字符串中 有""这个符号, 则只会传递""以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个""敏感吧
好, 这是第一种 依靠跳转的url带参数传值
2 用getCurrentPages(); 获取栈中全部页面的, 然后把数据写入相应页面
这里可以传字符串, 也能传数组等,
这样就把 address 传递并接受了
注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 onshow() 方法中接受, 因为再次返回只执行onshow()方法
3 写入本地, 跨页面在取出来 wxsetStorage/wxgetStorage等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了
4 把 数据声明为全局变量
var detail = getApp()detail; 可在任何页面获取
二 页内传值
1 设置id的方法标识跳转后传递后的参数
在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, var id = ecurrentTargetid;
2 设置 data-xxx 的方法来标识要传递的值
注 : 这里 data-index="{{index}}" 里的 {{index}} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标 在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, 即 var index = ecurrentTargetdatasetindex; 其他的参数取出也如此, var type = ecurrentTargetdatasettype;
3 form表单和input输入框
方法1:A页面跳转链接添加参数,B页面onLoad 接收
方法2:设置全局变量 globalData,用的少,一般适用于全局共享的一份信息,如用户open_id等
有句话说,会使用 vue 开发的程序员就会开发小程序,确实是这样,在我学习 vue 后,再去学习小程序时,感觉很好上手,因为很多语法都是类似的写法。当然,也有很多不一样的。
1声明 data :用过 vue 的朋友都知道, vue 中声明 data 时, data 必须是函数,不然会报错,原生的小程序就不是这样,直接 data: { } 就ok了。
2绑定数据:绑定动态属性时需要在属性的双引号里使用 {{ }}
3列表循环:使用 wx:for ,在循环题内有隐藏的item代表当前项, index 代表下标
4事件 事件处理函数在page里定义,和onLoad / data等同级
事件的写法:以 bind 或 catch 开头,然后跟上事件的类型,如 bindtap、catchtouchstart
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
事件的传参:事件传参不能事件处理通过 () 来传递参数,在组件里面通过自定义属性 data-xx="参数名称" 来定义,在事件处理函数里通过 eventcurrentTargetdataset 来获取参数
事件官方文档
5修改data里面的数据
在vue中,修改data里面的数据,直接 this属性 就可以修改了,可是小程序不一样,它需要通过 thissetData({ data: newData }) 来修改,访问data的中的数据用 thisdataxx 来访问;一开始学习小程序的时候,习惯了[vue](>
百度知道
微信小程序多个视频组件同时播放
青柠姑娘17
TA获得超过3005个赞
关注
成为第581位粉丝
首先说一下我的应用场景, 在小程序中会有多个页面存在视频组件的情况, 为了防止视频播放时多个视频组件同时播放的情况,现记录一下方案:
一 可以在需要视频播放的地方弄一个视频播放的按钮, 当视频播放的时候再初始化视频组件, 保证整个应用内只有一个视频组件(视频组件的位置需要计算), 整个方法只是理论下的情况;
二 在appjs中 设置两个对象, currentVideoId(播放视频组件的id)和videoContext(当前播放视频的对象, 通过wxcreateVideoContext方法获得), 在页面的js中控制, 保证video组件绑定play方法:
<video src="url" bindplay="play"></video>
在play方法中实现即可:
var id = ecurrentTargetid;
if (id != null) {
if (appcurrentVideoId != id) {
if (appvideoContext != null) {
appvideoContextstop();
consolewarn("暂停");
}
appcurrentVideoId = id;
appvideoContext = wxcreateVideoContext(id);
}
}
因为currentVideoId 和videoContext是唯一的对象, 方法中播放监听事件会暂停之前的播放, 然后再赋值, 等下次video播放监听进来的时候, 会进行判断
三 包含富文本组件的视频组件同时播放的情况
依据上面的例子, 当自定义富文本组件中包含多个video组件时也用上面的方法会产生错误, 虽然log会显示将执行视频暂停或者停止播放, 但是没有效果, 查看 视频api , 提示
根据api显示, id为video组件的id, 还有一个"Object this", 但是依据上面的api使用, 直接用id确实可以获取video对象, 但是api解释中提示, "在自定义组件下,当前组件实例的this,以 *** 作组件内 video组件", 在自定义组件中, 要加this, 所以总结: 在上面api使用中, 如果video在pages页面中, wxcreateVideoContext参数只写id没有问题, 但是当video在自定义组件中, 要必须加this, 才能正确返回VideoContext对象;
以上就是关于微信小程序for循环以及页面跳转全部的内容,包括:微信小程序for循环以及页面跳转、小程序页面传递数据 、传递数组对象 小程序传值、浅谈原生小程序等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)