前端笔记(5月10-14日)

微信小程序，通过变量名的字符串，来获取变量并使用

注：偶然发现 不用像后面写得那么麻烦，let param = "isShow";

let param = "isShow";   

this.data[`${ param }`] // 直接写成  this.data[ param ]

有一变量isShow，let param = "isShow"; 通过this.data[${ param }]可以获取到变量。 具体的例子：

data: {
  isShow:false
},
 
 
click:function(){
  console.log(this.data.isShow)
  this.switch_for_string("isShow")
  console.log("切换后：")
  console.log(this.data.isShow)
  console.log("")
},
 
// 切换变量值
switch_for_string: function (param) {
  // param是变量名的字符串，比如  param = "isShow"
  this.setData({
    [`${param}`]: !this.data[`${param}`]
  })

微信原生input组件，输入时可以将使用失去焦点和点击完成两个事件一起使用。可以不使用bindinput 减少setData调用

for循环绑定item的点击事件

给有点击事件的组件添加一个 data-any 属性 any可以是任意数据类型。

怎么用wx.navigateTo传递对象类型的数据？

传递的时候用JSON.stringify()包起来，在接受页面用JSON.parse()再转换回来

    wx.navigateTo({
      url: `/pages/shipping_Add_address/shipping_Add_address?address=${JSON.stringify(item)}`,
    })

  onLoad: function (options) {
    let address = JSON.parse(options.address)
  },

使用CSS实现如下效果

    height: 326px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0), rgba(255,255,255,0),rgba(255,255,255,0), rgba(0,0,0,0.5)),url("https://whiteclouds.oss-cn-shanghai.aliyuncs.com/temp-live1.jpg");
    background-size: 326px;

切换选项使用赋值，然后选项内判断

  <view class="content-box" wx:if="{{showType==='five'}}">
    <view wx:for="{{cardData}}">
      <m-favorite_live_card cardData="{{item}}"></m-favorite_live_card>
    </view>

js判断对象为空

• 通过 JSON 自带的 stringify() 方法来判断: JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

if (JSON.stringify(data) === '{}') {
    return false // 如果为空,返回false
}
return true // 如果不为空，则会执行到这一步，返回true