首页
JAVA笔记
数据库笔记
混乱记忆
小站记
您现在的位置
微信小程序 代码控制控件位置
简介: 微信小程序开发时,可能需要用代码来控制控件显示的位置,这里给出演示代码
下面的代码适合有一定小程序开发基础的同学阅读
JS中代码如下:
onLoad: function () {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.model)
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)
        console.log(res.language)
        console.log(res.version)
        console.log(res.platform)

        console.log(res.windowHeight * (750 / res.windowWidth))
        console.log((750-100) / (750 / res.windowWidth))
        that.setData({
          mtop: res.windowHeight * (750 / res.windowWidth) - 100,
          controls: [{
            id: 1,
            iconPath: '../../images/computer2.png',
            position: {
              left:(750-100) / (750 / res.windowWidth),
              top:    (res.windowHeight * (750 / res.windowWidth)-100)  / (750 / res.windowWidth),
              width: 50,
              height: 50,
              // right:0,
              // bottom: 0
            },
            clickable: true
          }],
        })
      }
    })
    console.log('onLoad')
  }

wxml中代码如下
<view class="container">
  <map class="my_map" show-location="true" 
  controls ="{{controls}}"
  markers="{{markers}}"
  bindcontroltap = "action1"
  scale="16">
  </map>
   <!--<button class="my_map" >xxxxx</button>-->
  <!--<button class="switch"  style="left:{{mleft}}rpx;top:{{mtop}}rpx" >xxxxx</button>-->
  
</view>

代码主要重写 onLoad 或 onReady 在其中根据系统给的宽高,然后计算出要设置的控件位置,最后通过setData 利用数据绑定机制实现动态修改 的目的。