MqttDemo/pages/test/component2.vue

<template>
  <view class="component2">
    <view class="box2" hover-class="box2-pressed">
      <view class="box" hover-class="box-pressed" hover-stop-propagation>
        I am box
      </view>
    </view>
    <button size="default">Button1</button>
    <button size="mini">Button2</button>
    <button class="button" plain>Button3</button>
    <button loading="true">Button5</button>
    <view>
      <image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFill"/>
      <image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit" />
      <scroll-view>

      </scroll-view>
      
    </view>
    
  </view>
</template>

<script>
export default {
  components: {},
  data: () => ({}),
  computed: {},
  methods: {},
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  /* onPageScroll(event) {}, */
  // 页面处理函数--用户点击右上角分享
  /* onShareAppMessage(options) {}, */
};
</script>


<style>
.component2 {
  width: 100vw;
  height: 100vh;

}
.box {
  width: 100rpx;
  height: 100rpx;
  background: green;
}
.box-pressed {
  background: red;
}
.box2 {
  width: 200rpx;
  height: 200rpx;
  background: pink;
}
.box2-pressed {
  background: burlywood;
}
.button{
  background: green;
  color: green;
}
</style>