textarea 原生组件 与 布局—小程序入门与实战【十七】

上一章节我们学习了果酱先生的登录跟完善用户信息。

这一章节我们来学习如何发布打卡。涉及到的知识点有:

  • 发布打卡如何布局
  • textarea 原生组件
  • 从本地相册选择图片 wx.chooseImage()
  • 将本地资源上传到服务器 wx.uploadFile()

分析设计稿

image

整体为上下布局。

textarea 组件 跟上传图片为一个整体模块。

发布打卡按钮单独为一个模块。

代码分析

released.wxml 代码

  <view class="gj_released_page">
   <view class="released-content">
       <view class="share-notes">
           <textarea name="text" id="" maxlength="-1" placeholder="分享新鲜事..." ></textarea>
       </view>
       <view class="share-wrap">
           <view class="share-item">
               <view class="share-img bgsize" style="background-image: url('https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3864452827,2593929039&fm=26&gp=0.jpg')">
               </view>
               <view class="iconfont icon-shibai delete"></view>
           </view>
           <view class="share-item item_dashed" >
               <view class="chooseimg" >
                   <view class="iconfont icon-juxing addimg"></view>
                   <span>上传照片</span>
               </view>
           </view>
       </view>
       <view class="share_prompt">
           * 建议上传竖版图片
       </view>
   </view>
   <view class="released-btn">
       <button formType="submit">发布打卡</button>
   </view>
</view>

released.less 代码

.gj_released_page{
 .released-content {
   padding: 20px 35px 34px 35px;
   background-color: #ffffff;
   .share-notes {
     height: 150px;
     textarea {
       height: 100%;
       line-height: 20px;
       color: #4A4A4A;
     }
     .textplaceholder {
       color: #9B9B9B;
       font-size: 14px;
       line-height: 20px;
     }
   }
   .share-wrap {
     display: flex;
     flex-wrap: wrap;
     .share-item {
       position: relative;
       border: 1px solid #d9d9d9;
       padding: 7px;
       width: 26%;
       border-radius: 2px;
       margin-right: 5px;
       margin-bottom: 5px;
       .delete {
         position: absolute;
         color: #cccccc;
         top: -5px;
         right: -2px;
       }
       .share-img {
         width: 100%;
         height: 0;
         overflow: hidden;
         margin: 0 auto;
         padding-bottom: 100%;
       }
       .bgsize {
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }
       &.item_dashed {
         border: 1px dashed #d9d9d9;
         background: #fafafa;
       }
       .chooseimg {
         text-align: center;
         color: rgba(0, 0, 0, 0.45);
         font-size: 12px;
         padding: 13px 0;

         .addimg {
           font-size: 25px;
           padding-bottom: 10px;
         }
         span {
           font-size: 7px;
           color: rgba(0, 0, 0, .65);
           line-height: 11px;
         }
       }
     }
   }
   .share_prompt {
     padding: 7px 0 12px 0;
     font-size: 10px;
     color: #9B9B9B;
     line-height: 24px;
   }
   .share-activity {
     display: flex;
     align-items: center;
     padding: 17px 0;
     font-size: 14px;
     .tip {
       color: #4A4A4A;
       font-size: 16px;
       padding: 0 10px 0 5px;
     }
     .add-activity {
       flex: 1;
       color: #4A4A4A;
     }
     .under {
       color: #9B9B9B;
       font-size: 12px;
     }
   }
 }
 .released-btn {
   margin: 30px 15px 0 15px;
   button {
     font-size: 16px;
     line-height: 22px;
     padding: 9px 0;
     border: 1px solid #002FA7;
     color: #002FA7;
     border-radius: 3px;
     background: #ffffff;
   }
 }
}

上面我们使用了 textarea 组件,下面我们来讲解 。

textarea 原生组件

textarea 是由客户端创建的原生组件。

限制

为什么强调原生组件呢?因为原生组件有限制:

  • 层级最高,无论其他组件的设置的 z-index 有多高,都无法盖在原生组件上。
    • 后插入的原生组件可以覆盖之前的原生组件。
  • 部分 CSS 样式无法应用于原生组件
    • 无法对原生组件设置 CSS 动画
    • 无法定义原生组件为 position: fixed
    • 不能在父级节点使用 overflow: hidden来裁剪原生组件的显示区域
  • 原生组件还无法在 picker-view 中使用。
常用属性
  • value : 输入框的内容
  • placeholder :输入框为空时占位符
  • placeholder-class :指定 placeholder 的样式类
  • bindinput :当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode},keyCode 为键值,目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上。

组件使用方法:

<textarea  placeholder="分享新鲜事..." bindinput="changeText" ></textarea>

事件函数:

data:{
   describe:''
},
changeText(e){
   let describe = e.detail.value;
   this.setData({
   describe:describe
   })
}

这样子我们就获取到 textarea 组件里面输入的内容了。

总结

  • 样式布局
  • textarea 原生组件

下一章节我们继续讲解 从本地相册选择图片 wx.chooseImage(),将本地资源上传到服务器 wx.uploadFile()