小程序显示隐藏切换

//html代码

//hide是一个样式的类名

1：先自定义一个变量来控制容器里的两组字先后显示

<view class="hide{{xs?'show':''}}" bindtap="dj">{{xs?'亚索':'剑圣'}}</view>

<view class="hide{{xs?'show':''}}" bindtap="dj">{{xs?'亚索':'剑圣'}}</view>

2要显示的内容:

<view class="hide{{xs?'show':''}}">

<text class="text">西部牛仔</view>

</view>

<view class="hide{{xs?'show':''}}">

<text class="text">西部牛仔</view>

</view>

//js代码

data: {

    xs: true

  },

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

  onLoad: function (options) {

//控制我的变量名初始值以及切换的值

    xs:(options.xs=="true"?true:false)

  }

//当我点击的时候同过setData方法将我的初始值取反

  , dj: function () {

    var that = this;

    that.setData({

      xs: (!that.data.xs)

    })

  },

//这样一个显示隐藏切换效果就写完了  英语水平有点欠缺 为了更多人能看懂代码  变量名起的比较不专业 （有哪些意见或者建议大家指点一下，谢谢！！！）