零基础云开发一个投票小程序(3)

页面效果:

simple.wxml

<!--pages/index/simple/simple.wxml-->
<view class="title">{{title}}</view>

<view class="brief">{{brief}}</view>

<view class="p">添加选项</view>
<view class="contents">

  <view class="item" wx:for="{{tabs}}"wx:key="{{index}}">
  <view class="id">{{index}}</view>
  <input  auto-focus="{{index>2?true:false}}"bindfocus="input" data-index="{{index}}"bindinput="input"class="input" bindblur="bindblur" placeholder="请输入选项名称" placeholder-style="color:white;text-align:center"value="{{item.value}}"></input>
  <image src="../../../images/delete.png"class="icon"wx:if="{{tabs.length>1}}"bindtap="del"data-index="{{index}}"></image> 
   <image src="../../../images/add.png"class="icon"wx:if="{{index==tabs.length-1}}"bindtap="add"></image> 
  </view>
<view class="btns">
<button bindtap="submit" id="save" class="save">保存</button>
<button  bindtap="submit" id="pre" class="pre">预览</button>
<button  bindtap="submit" id="push" class="push">发布</button>
</view>
</view>

simple.wxss

/* pages/index/simple/simple.wxss */
.page{
  width: 100%;
}
.title{
  padding: 30rpx 0 30rpx 0;
  text-align: center;
  font-size: 50rpx;
  font-weight:  bold;
  color: rgb(104, 104, 255)
}
.brief{
  padding: 10rpx 20rpx 10rpx 20rpx;
  font-size: 30rpx;
}
.p{
  padding: 30rpx 0rpx 10rpx 20rpx;
  font-size:40rpx;
  color:grey;
}
.p::after{
  content: "+";
  color:grey;
}
.contents{
  padding: 10rpx 20rpx 10rpx 20rpx;
}
.item{
display: flex;
flex-direction: row;
padding: 10rpx 0 10rpx 0;
}
.icon{
  width: 50rpx;height: 50rpx;
  padding:25rpx 10rpx;
}
.id{
  padding-right:10rpx;
  width: 80rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.input{
  width: 480rpx;
   text-align: center;
  border-radius: 10rpx;
  height: 100rpx;
  background-color: rgba(107, 166, 243, 0.986)
}
.btns{
 display: flex;
 flex-direction: row;
}
.btns button{
   width: 200rpx;
   color: white;
   margin-top: 50rpx;
}
.save{
  background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
.pre{
  background-color: #FAACA8;
background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
}
.push{
  background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}

simple.js

// pages/index/simple/simple.js
var index=0
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:"投票标题",
    brief: "投票简介为某人的简要介绍。个人简介可以是表格的形式，也可以是其他形式。一般用于初次见面时个人介绍中或者个人履历表中等。应注意的问题写法灵活忌硬套格式 安排结构、运用笔墨应遵循古人所说'定体则无，大体须有'的原则才是.",
tabs:[
  { value: "" }, { value: "" }, { value: "" }
],
focus:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
wx.getSystemInfo({
  success: function(res) {
    that.setData({
      vh:res.windowHeight
    })
  },
})
  },
add(e){
  var its = this.data.tabs
  its.push({value:''})
this.setData({
  tabs:its
})
},
del(e){
  var its = this.data.tabs
  var ind = e.currentTarget.dataset.index
  its.splice(ind,1)
  this.setData({
    tabs: its
  })
},
bindblur(e){
  this.setData({
    focus:false
  })
},
input(e){
if(e.type==="focus"){
  this.setData({
    focus:true
  })
index=e.currentTarget.dataset.index
}
if(e.type==="input"){
  this.setData({
  ["tabs["+index+"].value"]:e.detail.value
  })
}
},
submit(e){
  console.log(e)
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})