【小程序】通过setData动态修改Data变量和前台class的样式及前台值参到后台（图文+完整示例）

一、style方式修改

1、even.wxml

<!--pages/js/even.wxml-->
<view style="margin-bottom: 20px;margin-top: 20px;">-------通过setData单击view修改变量---------</view>
<view bindtap="click_1" data-title="单击后，我是张飞" data-id="123"
style="height:{{s_height}}px;width:{{s_width}}px;background-color:{{color}};line-height: 45px;text-align: center;">
   {{title}}
</view>

2、even.js

// pages/js/if.js
Page({

    /**
     * 页面的初始数据
     */
    data: { 
        s_height: 50, 
        s_width: 200,
        title: "请单击view",
        color:"orange" },

    click_1: function (res) {

        console.log("===========");
        console.log(res); // 查看res整个数据对象

        console.log(res.currentTarget.dataset.title); // 查看res中dataset中的title值


        if ( this.data.s_height == 50) {
            this.setData({
                s_height: 100,
                s_width: 300,
                title: res.currentTarget.dataset.title, // 获取前台wxml中传过来的title值
                color:"green"
            })
        }
        else{
            this.setData({
                s_height: 50,
                s_width: 200,
                title: "请单击view",
                color:"orange"
            }) 
        }



        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {

        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {

        },

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {

        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {

        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {

        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {

        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {

        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {

        }
    })

二、通过class方式修改