一个简单的小程序基本页面_一个基础的小程序页面

页面数据渲染

<template>
  <div>
    <div v-for="item in listData" class="details-list">
      <div class="detail-block">
        <div class="detail-item">
          <span>部门编号：</span>
          <span>{{ item.no }}</span>
        </div>
        <div class="detail-item">
          <span>部门名称：</span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="detail-block">
        <div class="detail-item">
          <span>第一工位名称：</span>
          <span>{{ item.first }}</span>
        </div>
        <div class="detail-item">
          <span>第二工位名称：</span>
          <span>{{ item.second }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

添加相关页面 

<template>
  <div class="form-container">
    <div class="form-module">
      <label class="form-label required">名称</label>
      <div class="form-input-block">
        <input type="text" class="form-input" v-model="formParams.name" placeholder="请输入">
      </div>
    </div>
    <div class="form-module">
      <div class="form-button-block">
        <button class="form-button" @click="saveForm">提交</button>
      </div>
    </div>
  </div>
</template>
<script>
 
export default {
  components: { //引入其它组件
 
  },
  data() {  // 设置数据
    return {
      thatOptions: null,//当前页面的接收对象
      userInfo: [],//登录用户信息
      isSubmit: false,  //是否提交过
      formParams: {},  //提交的数据对象
    }
  },
  onShow() {  //页面显示或从后台跳回小程序时触发
  },
  onUnload: function () { //页面销毁
    this.thatPageClose();
  },
  onLoad(options) {  //页面第一次加载
    let that = this;
    that.thatOptions = JSON.parse(options.options)
    console.log("初始化页面---")
  },
  mounted() { //vue 生命周期，初始化页面后对dom进行相关操作
  },
  methods: {  //写方法的地方
    thatPageClose() { //页面销毁
      this.isSubmit = false;  //是否提交过
      console.log("页面已销毁....")
    },
    saveForm() { //提交数据方法
 
    },
  }
}
 
</script>
 
<style lang="scss" scoped>
@import "static/common/common";
@import './index.scss';
</style>

相关css

/******** form 表单样式开始 ***********/
.form-container {
  padding: 10px;
  background-color: white;
}
 
.form-container .form-module {
  display: flex;
  margin-bottom: 10px;
  font-size: 12px;
  color: #000;
}
 
.form-container .form-module .form-label {
  width: 75px;
  line-height: 25px;
}
 
.form-container .form-module .required:after {
  content: '*';
  color: red;
}
 
.form-container .form-module .form-input-block {
  width: 100%;
}
 
.form-container .form-module .form-input-block .form-input {
  border-bottom: 1px solid #bfbfbf;
}
 
.form-container .form-module .form-button-block {
  width: 100%;
  text-align: center;
  display: block;
  margin: 20px 0;
}
 
.form-container .form-module .form-button-block .form-button {
  bottom: 0;
  width: 30%;
  text-align: center;
  background-color: #4C9BD9;
  color: #fff;
  line-height: 36px;
  font-size: 14px;
}
 
/******** form 表单样式结束 ,详情样式开始 ***********/
.details-list {
  background-color: #F0F0F0;
  width: 100%;
  padding: 10px 0;
  font-size: 12px;
  color: #0A0A0A;
}
 
.item-right{
  padding-right: 10px;
  text-align: right;
}
.details-list .detail-block {
  background-color: white;
  width: 100%;
  padding: 10px;
  display: flex;
}
 
.details-list .detail-block .detail-item-row {
  width: 100%;
  padding-right: 10px;
}
 
.details-list .detail-block .detail-item {
  width: 50%;
  padding: 0 10px;
}
.details-list .detail-block .detail-item .item-title{
  font-weight: bold;
  font-size: 15px;
}
.details-list .detail-block .detail-item .item-button {
  background-color: #1E9FFF;
  padding: 2px 10px;
  color: white;
  font-size: 12px;
}
 
.page-bottom {
  width: 100%;
  position: fixed;
  display: flex;
  bottom: 0;
}
 
.page-bottom .page-bottom-button {
  background-color: #1E9FFF;
  width: 100%;
  font-size: 13px;
  color: white;
}
/******** 详情样式结束 ***********/