类博客页面获取输入字数&&键盘拉起底层上提&&&选择图片的实现

一、获取输入字数

在我们的输入组件中使用bindinput="事件名"的方法可以获取到我们向输入框中输入的信息的值

设置最大输入个数

在我们的bindinput事件中已经获取到输入的个数，所以我们可以让他与最大输入值进行比较，这样就可以限定输入最大的长度了。

 //获取用户输入信息
  onInput(event){
    var wordsNum=event.detail.cursor//获取输入长度
    if (wordsNum>= MAX_length) {
      wordsNum=`最大字数为${MAX_length}`
    }
    this.setData({
      wordsNum:wordsNum,
    })
  },

二、键盘拉起底层上提的实现

通过我们输入时获取的焦点来判断我们当前是否打开了键盘。
如果打开了键盘就获取获得焦点的事件，失去焦点执行失去的事件。以此实现功能

而我们获取焦点的方法，是可以返回当前显示设备的高度的，

所以我们让获取到焦点的时候同步获取到设备的高度

在焦点时进行绑定

这样就可以在我们移动设备弹出键盘时同步获取到屏幕底部的距离，从而进行距离的调整。

三、选择图片

选择图片，在微信中也有着自己的内置函数wx.chooseImage
通过他我们就可以得到上传的数据

onChooseImage(){
    let maxImg=MAX_img-this.data.images.length //还能选择几张
    wx.chooseImage({
     count:maxImg,
     sizeType:['original','compressed'],//图片类型
     sourceType:['album','camera'], //图片源头（相机或图库）
     success:(res)=>{
       this.setData({
         images:this.data.images.concat(res.tempFilePaths)
       })
     }

通过设置属性来设置我们获取到的信息。在成功之后返回了我们可以看到的信息的图片的值。

在数据绑定的时候，通过tempFilePaths里边的上传图片内容来传到存放图片的数组。
显示图片
使用循环，循环遍历我们的数组

<!--显示图片-->
		<block wx:for="{{images}}" wx:key="*this">
			<view class="image-wrap">
				<image class="image" src="{{item}}" mode="aspectFill"></image>
			</view>
		</block>

当我们的数组已经满了的话，让添加图片的加号消失

用hidden的方式来判断是否隐藏。

添加删除，对图片添加删除的小图标和样式略，可以看源码。主要是事件。点击删除事件，我们就需要判断出当前图片是哪一个图片，否则删除肯定也不正常
，所以才需要到了图片的索引值

splice()函数：删除数组中指定元素索引的元素值
事件触发时会删除对应数组的值，会改变原有的数组，所以不要直接将数组放上去，是需要将改变完后的数组放上去就OK的
在前端自定义函数索引值

在事件中获取索引值，将改变后的数组进行数据绑定

 onDelect(event){
      this.data.images.splice(event.target.dataset.index) //删除对应的图片，改变了图片数组
      this.setData({
        images:this.data.images
      })  
      if (this.data.images==MAX_img-1) {
        this.setData({
          isPhote:true  //这样就可以在删的不是9张时显示加号图标
        })
      }
  },

点击图片预览
点击图片预览的事件，主要是使用了微信自带的属性previewImage来实现

onChaKanImg(event){
    wx.previewImage({
      urls:this.data.images,
      current:event.target.dataset.imgsrc
    })
  },

通过urls来查看对应的哪个数组，current来定义图片的URL。通过自定义属性来定义图片SRC，来定位图片data-imgsrc="{{item}}