微信小程序知识集_rpx px的区别

1.rpx和px的区别

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 　　 1px = 2.34rpx
iPhone6 1rpx = 0.5px 　　　　1px = 2rpx
iPhone6s 1rpx = 0.552px 　　 1px = 1.81rpx

2.wx:for

// 数组的当前项的下标变量名默认为index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

// 自定义当前项下标和变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="obj">
  {{idx}}: {{obj.message}}
</view>
1
2
3
4
5
6
7
8
9

3.回到顶部

参考：https://blog.csdn.net/qq_33878858/article/details/81217817

  /**
	获取滚动条当前位置
	**/
  onPageScroll: function (e) {
    console.log(“当前页面滚动的距离”+e)
    if (e.scrollTop > 150) {  //页面距离大于150px,则显示回到顶部控件
      this.setData({
        cangotop: true
      });
    } else {
      this.setData({
        cangotop: false
      });
    }
  },
  /**
	回到顶部，内部调用系统API
	**/
  goTop: function (e) {  // 一键回到顶部
    if (wx.pageScrollTo) {
     wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，暂无法使用该功能，请升级后重试。'
      })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4.获取checkbox-group当前点击元素

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox checkout-box" wx:for="{{list}}" wx:key="item.id">
  	<checkbox value="{{item.id}}" checked="{{item.checked}}"  data-id="{{item.id}}"/>{{item.value}}
  </label>
</checkbox-group>
1
2
3
4
5

page({
	data:{
		list:[
		      { id: 1, money:100, checked: false, value: '越秀分店' },
		      { id: 2, money:99, checked: false, value: '天河分店' },
		      { id: 3, money:88, checked: false, value: '黄埔分店'},
		]
	},
	/**
   * 复选框选中选中触发
   */
  checkboxChange(e){
    const arr = e.detail.value // 当前选中的所有选项
    const list = this.data.list
    list.forEach(obj => {
      obj.checked = false
    })
    arr.forEach( id => {
      for (let k of list){
        if (k && Number(k.id) === Number(id)) {
          k.checked = true
          breakd
        }
      }
    })
    this.setData({
      list: list
    })
  }

})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33