小程序显示隐藏切换

//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)

    })

  },

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容