小程序自定义组件之页面框架

最新推荐文章于 2024-09-13 16:43:33 发布

jjr_1984

最新推荐文章于 2024-09-13 16:43:33 发布

阅读量307

点赞数 6

分类专栏：小程序移动开发页面配置文章标签：小程序微信小程序 javascript 信息与通信

本文链接：https://blog.csdn.net/jjr_1984/article/details/136714983

版权

小程序同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

移动开发

7 篇文章 0 订阅

订阅专栏

页面配置

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在微信小程序中自定义页面框架，包括WXML结构、CSS样式以及JavaScript逻辑处理，重点展示了页面布局、顶部导航栏和事件处理等内容。

摘要由CSDN通过智能技术生成

引言

本文主要是讲述对整个小程序页面框架的自定义

页面布局

<!--components/frame/frame.wxml-->
<view class="parent">
  <!-- bg -->
  <view class="header_bg">
    <image class="top-image" mode="widthFix" src="../images/wd_bg.png" />
  </view>
  <!-- wrap -->
  <view class="content-wrap">
    <!-- top-bar -->
    <view class="top-bar {{position == 0 ? '' : 'top-bar-title-middle'}}" style="margin-top: {{marginTop}}px;">
      <image wx:if="{{visiable}}" class="top-bar-image" src="../images/top_return.png" mode="aspectFit" bindtap="onClick"/>
      <view class="title {{position == 0 ? 'top-bar-title-left' : ''}}">{{title}}</view>
      <!-- 右边的无效的view，为了标题居中 -->
      <view wx:if="{{visiable}}" class="top-bar-image top-bar-image-right" />
    </view>
      
    <!-- content -->
    <slot></slot>
  </view>
</view>

页面CSS

/* components/frame/frame.wxss */
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.title {
  /* width: 100%; */
  height: 70rpx;
  font-size: var(--fs42);
  font-weight: 500;
  /* color: var(--defaultColor); */
  color: #fff;
  /* margin-top: 80rpx; */
  /* position: relative; */
  text-align: center;
  line-height: 70rpx;
}
.header_bg {
  width: 100vw;
  height: 583rpx;
  /* height: 100%; */
  position: absolute;
}
.top-image {
  width: 100%;
  height: 100%;
}
.content-wrap {
  position: relative;
  width: 100%;
}

.top-bar {
  position: relative;
  display: flex;
  flex: column;
  /* justify-items: center; */
  /* 垂直居中 */
  align-items: center; 
  width: 100%;
  /* height: 70rpx; */
  height: 32px;
  /* background-color: brown; */
}
.top-bar-title-left {
  margin-left: 30rpx;
}
.top-bar-title-middle {
  justify-content: center;
}

.top-bar-image {
  width: 34rpx;
  height: 34rpx;
  margin-left: 20rpx;
}

.top-bar-image-right {
  margin-right: 20rpx;
  /* background-color: chartreuse; */
}

页面逻辑处理

// components/frame/frame.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 标题栏标题的内容，不显示可以不设置值。
     */
    title: {
      type: String,
      value: ''
    },
    /** 返回按钮是否可见 */
    visiable: {
      type: Boolean,
      value: true
    },
    /**
     * 标题的位置，0：靠左；其他值居中
     */
    position: {
      type: Number,
      value: 0
    },
    distributed: {
      type: Boolean,
      value: false
    }
    // onBackListener: {
    //   type: 'Function',
    //   value: () => {}
    // }
  },

  /**
   * 组件的初始数据
   */
  data: {
    marginTop: getApp().globalData.marginTop
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onClick() {
      console.log('frame#onClick start!!!');
      if (this.data.distributed) {
        this.triggerEvent('onBackListener');
      } else {
        wx.navigateBack({
          delta: 0,
        })
      }      
    }
  }
})