小程序button事件作用到地图上

1、两个页面之间传值，例如点击A页面跳转到B页面，把A页面的变量传到B页面。

2、第一种方法在button上绑定一个点击函数，代码：<button bindtap='tz'>我是A页面</button>。

2、在对应的js文件里面写上跳转代码，并携带参数ID=3。

3、点击一下A页面的button，在B页面就可以收到值了，B页面的options里面是要接收的值。

4、第二种方法就是直接跳转，携带参数直接写在里面。

看到一个需求，对一些前端小白或者刚开始写小程序的人来说，可能会有点帮助，效果如下：

就是以上效果，废话不多说，上代码

wxml:

<view class='list_box' wx:for='{{list}}' wx:key='this' wx:for-item='parentItem' wx:for-index='parentIndex' >

<view class='list'>

<view class='list_name_box' catchtap='listTap' data-parentindex='{{parentIndex}}'>

<text class='list_item_name'>{{parentItemlistName}}</text>

<image src='/img/downpng' class='icon_down {{parentItemshow&&"icon_down_rotate"}}'></image>

</view>

<view class='list_item_box' wx:if='{{parentItemshow}}'>

<view class='list_item' wx:for='{{parentItemitem}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}'  data-parentindex='{{parentIndex}}'>

<view class='list_item_name_box'>

<text class='list_item_name'>{{itemitemName}}</text>

<image src='/img/downpng' class='icon_down {{itemshow&&"icon_down_rotate"}}'></image>

</view>

<view class='other_box' wx:if='{{itemshow}}'>

<view class='other'>

<text class='other_title'>内容：</text>

<text class='other_text'>{{itemcontent}}</text>

</view>

<view class='other'>

<text class='other_title'>时间：</text>

<text class='other_text'>{{itemtime}}</text>

</view>

</view>

</view>

</view>

</view></view>

然后wxss:

page{

background: #f3f7f7;}list_name_box{

background: #fff;

border-bottom: 1px solid #efefef;

display: flex;

height: 90rpx;

align-items: center;

padding: 0 25rpx;

font-size: 32rpx;}list_item_name{

flex: 1;}icon_down{

width: 35rpx;

height:35rpx;

transition:transform  03s;}/ list_item_box{

height: 0;

transition:height  03s;

overflow: hidden;

}

list_item_box_show{

height: 500rpx;

} /list_item_name_box{

background: #fff;

font-size: 30rpx;

height: 80rpx;

display: flex;

align-items: center;

padding: 0 25rpx 0 50rpx;}other{

display: flex;

height: 80rpx;

padding: 0 25rpx 0 50rpx;

align-items: center;

font-size: 30rpx;

color: #666;}icon_down_rotate{

transform:rotate(180deg);}

JS:

// pages/dome/domejsPage({

/

页面的初始数据

/

data: {

list:[

{listName:'列表1',

item:[{

itemName:'子列表1-1',

content:'1-1中的内容',

time: '2015-05-06'

}, {

itemName: '子列表1-2',

content: '1-2中的内容',

time: '2015-04-13'

}, {

itemName: '子列表1-3',

content: '1-3中的内容',

time: '2015-12-06'

}]

},

{

listName: '列表2',

item: [{

itemName: '子列表2-1',

content: '2-1中的内容',

time: '2017-05-06'

}, {

itemName: '子列表2-2',

content: '2-2中的内容',

time: '2015-08-06'

}, {

itemName: '子列表2-3',

content: '2-3中的内容',

time: '2015-11-06'

}]

}, {

listName: '列表3',

item: [{

itemName: '子列表3-1',

content: '3-1中的内容',

time: '2015-05-15'

}, {

itemName: '子列表3-2',

content: '3-2中的内容',

time: '2015-05-24'

}, {

itemName: '子列表1-3',

content: '3-3中的内容',

time: '2015-05-30'

}]

}

]

},

//点击最外层列表展开收起

listTap(e){

consolelog('触发了最外层');

let Index = ecurrentTargetdatasetparentindex,//获取点击的下标值

list=thisdatalist;

list[Index]show = !list[Index]show || false;//变换其打开、关闭的状态

if (list[Index]show){//如果点击后是展开状态，则让其他已经展开的列表变为收起状态

thispackUp(list,Index);

}

thissetData({

list    });

},

//点击里面的子列表展开收起

listItemTap(e){

let parentindex = ecurrentTargetdatasetparentindex,//点击的内层所在的最外层列表下标

Index=ecurrentTargetdatasetindex,//点击的内层下标

list=thisdatalist;

consolelog(list[parentindex]item,Index);

list[parentindex]item[Index]show = !list[parentindex]item[Index]show||false;//变换其打开、关闭的状态

if (list[parentindex]item[Index]show){//如果是 *** 作的打开状态，那么就让同级的其他列表变为关闭状态，保持始终只有一个打开

for (let i = 0, len = list[parentindex]itemlength;i<len;i++ ){

if(i!=Index){

list[parentindex]item[i]show=false;

}

}

}

thissetData({list});

},

//让所有的展开项，都变为收起

packUp(data,index){

for (let i = 0, len = datalength; i < len; i++) {//其他最外层列表变为关闭状态

if(index!=i){

data[i]show = false;

for (let j=0;j<data[i]itemlength;j++){//其他所有内层也为关闭状态

data[i]item[j]show=false;

}

}

}

},

onLoad: function (options) {

},

/

生命周期函数--监听页面初次渲染完成

/

onReady: function () {

},

/

生命周期函数--监听页面显示

/

onShow: function () {

},

/

生命周期函数--监听页面隐藏

/

onHide: function () {

},

/

生命周期函数--监听页面卸载

/

onUnload: function () {

},

/

页面相关事件处理函数--监听用户下拉动作

/

onPullDownRefresh: function () {

},

/

页面上拉触底事件的处理函数

/

onReachBottom: function () {

},

/

用户点击右上角分享

/

onShareAppMessage: function () {

}})

作者：

链接：>

小程序实现换肤功能结构<view class='page' id='{{SkinStyle}}'>

<view class='header'>

<view class='h-skin iconfont {{SkinStyle!=="normal""icon-moon":"icon-sun"}}' bindtap='bgBtn'></view>

</view></view>

要模拟一个可修改的根节点page 根据 id='{{SkinStyle}}’ 来配置themewxss 每个页面@import 这个themewxss#dark header{}切换按钮全局变量：globalData:{skin:“normal”} //appjs文件中页面中bgBtn事件bgbtn:function(){ thissetData({

SkinStyle: appglobalDataskin //设置SkinStyle的值

}) wxsetStorage({ //设置storage key: 'skins', data: appglobalDataskin,

})}页面的Page中的onLoad事件里，读取storage并设置SkinStyle的值onLoad: function (options) { var that=this;

wxgetStorage({

key: 'skins',

success: function(res) { thatsetData({ SkinStyle: resdata }) }, })}

以上就是关于小程序button事件作用到地图上全部的内容，包括:小程序button事件作用到地图上、小程序手写日历、微信小程序怎么把变量传到另一个页面等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！