小程序增删改查【上篇简单布局】

//WXML
<view class="cont">
  <!-- 顶部搜索模块 -->
  <view class='head_sele_view'>
    <input type='text' class='select_name' placeholder='请输入要搜索的昵称' />
    <view class='selec_btn'>搜索</view>
  </view>
  <!-- 默认显示列表数据 -->
  <view class='list' wx:for="{{list}}" wx:key="key">
    <label class='list_title'>{{item.list_title}}</label>
    <view class='list_base_list'>
      <label class='list_add'>添加</label>
      <label class='list_add'>修改</label>
      <label class='list_add'>删除</label>
    </view>
  </view>
<!--  -->
</view>

//WXSS
/**index.wxss**/

.cont {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部搜索模块 */

.head_sele_view {
  position: relative;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: tomato;
}

.select_name {
  width: 70%;
  position: absolute;
  left: 30rpx;
  font-size: 30rpx;
  padding-left: 30rpx;
  height: 80rpx;
  top: 10%;
  background-color: #fff;
}

.selec_btn {
  position: absolute;
  right: 30rpx;
  width: 125rpx;
  top: 10%;
  text-align: center;
  font-size: 30rpx;
  padding: 10rpx 0rpx;
  display: inline-block;
  background-color: #fff;
  height: 63rpx;
  line-height: 63rpx;
}

/* 列表数据 */

.list {
  position: relative;
  top: 20rpx;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  margin-bottom: 15rpx;
  font-size: 30rpx;
  background-color: #fff;
}

/* 标题 */

.list_title {
  position: absolute;
  width: 500rpx;
  height: 100rpx;
  left: 30rpx;
}

/* 功能视图 */

.list_base_list {
  position: absolute;
  width: 273rpx;
  height: 100rpx;
  padding: 0rpx 10rpx;
  line-height: 100rpx;
  float: left;
  right: 0rpx;
}

/* 添加 */

.list_add {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding: 10rpx 10rpx;
  margin: 5rpx 10rpx;
  font-size: 28rpx;
  background-color: #333;
  color: #fff;
  text-align: center;
}

//JS
const app = new getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      list_name: "",
      list_title: "你说这是什么，我不太明白",
      list_img: ""
    }, {
      list_name: "",
      list_title: "你说这是什么，我不太明白",
      list_img: ""
    }, {
      list_name: "",
      list_title: "你说这是什么，我不太明白",
      list_img: ""
    }, {
      list_name: "",
      list_title: "你说这是什么，我不太明白",
      list_img: ""
    }, {
      list_name: "",
      list_title: "你说这是什么，我不太明白",
      list_img: ""
    }, {
      list_name: "",
      list_title: "你说这是什么，我不太明白",
      list_img: ""
    }, ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

小程序增删改查【上篇简单布局】

相关推荐