update

components/emoji/emoji.js

+import EmojiObj from '../../utils/emojimap.js'
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    localAlbumImages: ['/images/album-emoji.png', '/images/album-ajtd.png', '/images/album-xxy.png', '/images/album-lt.png'],
+    albumArr: [],
+    currentAlbum: 'emoji',
+    emojiList: {},
+    currentAlbumKeys: [] //存储每一类别的key
+  },
+  attached: function() {
+    let currentAlbumKeys = this.splitAlbumKeys(Object.keys(EmojiObj.emojiList[this.data.currentAlbum]), this.data.currentAlbum == 'emoji' ? 23 : 10)
+    this.setData({
+      albumArr: EmojiObj.albumArr,
+      emojiList: EmojiObj.emojiList,
+      currentAlbumKeys
+    })
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+       * 切换emoji类别
+       */
+    switchAlbum: function(e) {
+      let currentAlbum = e.currentTarget.dataset.album
+      // 提前跟新一次，下面分类需要用到
+      this.setData({
+        currentAlbum
+      })
+      let currentAlbumKeys = this.splitAlbumKeys(Object.keys(this.data.emojiList[currentAlbum]), currentAlbum == 'emoji' ? 23 : 10, currentAlbum)
+
+      this.setData({
+        currentAlbumKeys
+      })
+    },
+    /**
+     * 每页显示固定个数
+     * arr数据源数组，space每个数组最大容量 
+     * [[], [], []]
+     */
+    splitAlbumKeys: function (arr, space, currentAlbum) {
+      const delta = space || 23
+      let result = [],
+        factor = Math.ceil(arr.length / delta),
+        begin = 0,
+        end = 1
+      if (factor == 1) {
+        result = [[...arr]]
+      } else {
+        for (let i = 1; i < factor; i++) {
+          let temp = []
+          temp = [...arr.slice(begin, i * delta)]
+          begin = i * delta
+          result.push(temp)
+        }
+        result.push([...arr.slice(delta * (factor - 1), arr.length)])
+      }
+      if (currentAlbum == 'emoji' || this.data.currentAlbum == 'emoji') { // 只有emoji才添加删除按钮
+        result.map((cata, index) => {
+          if(index != (result.length-1)) {
+            cata.push('[删除]')
+          }
+        })
+        // console.log(result)
+      }
+      return result
+    },
+    /**
+     * 单击emoji
+     */
+    emojiTap: function(e) {
+      let emoji = e.target.dataset.emoji
+      if (!emoji) return
+      // console.log(emoji)
+      this.triggerEvent("EmojiClick", emoji)
+    },
+    /**
+     * 发送emoji
+     */
+    emojiSend: function () {
+        this.triggerEvent("EmojiSend")
+      }
+  },
+})

components/emoji/emoji.json

+{
+  "component": true
+}
\ No newline at end of file

components/emoji/emoji.wxml

+ <view class='emoji-wrapper'>
+  <view class='emoji-content'>
+    <swiper indicator-dots='true' class='emoji-content-swiper'>
+     <block> 
+      <view style='display: inline-block;' wx:for="{{currentAlbumKeys}}"  wx:for-item="currentEmojiArr" wx:key="{{Math.random()}}" bindtap='emojiTap'>
+          <swiper-item>
+            <view class='emoji-content-item'  wx:for="{{currentEmojiArr}}"  wx:for-item="currentEmojiKey" wx:key="{{currentEmojiKey}}">
+              <image src="{{emojiList[currentAlbum][currentEmojiKey].img}}" class='{{currentAlbum == "emoji" ? "emoji-content-img-emoji" : "emoji-content-img-other"}}' data-emoji='{{currentEmojiKey}}'></image>
+            </view>
+          </swiper-item>
+        </view>  
+      </block>
+    </swiper>
+  </view>
+  <view class='emoji-album'>
+     <!-- <view class='emoji-album-left' wx:for="{{albumArr}}" wx:for-item="album" wx:key="{{album.album}}" data-album="{{album.album}}" bindtap='switchAlbum'>
+      <image src='{{album.img}}' class='{{album.album == currentAlbum ? "emoji-album-left-img album-active" : "emoji-album-left-img"}}'></image> 
+    </view>  -->
+     <view class='emoji-album-left' wx:for="{{albumArr}}" wx:for-item="album" wx:for-index="index" wx:key="{{album.album}}" data-album="{{album.album}}" bindtap='switchAlbum'>
+      <image src='{{localAlbumImages[index]}}' class='{{album.album == currentAlbum ? "emoji-album-left-img album-active" : "emoji-album-left-img"}}'></image> 
+    </view> 
+    <view class='emoji-send' bindtap='emojiSend'>发送</view>
+  </view>
+</view>
\ No newline at end of file

components/emoji/emoji.wxss

+.emoji-wrapper {
+ width: 100%;
+ height: 100%;
+  background-color: #fff;
+}
+/*内容  */
+.emoji-content {
+  width: 100%;
+  height: 400rpx;
+  /* padding-top: 30rpx; */
+  padding-left: 20rpx;
+  box-sizing:border-box;
+}
+.emoji-content-swiper {
+  width: 100%;
+  height: 100%;
+}
+.emoji-content-item {
+  display: inline-block;
+  margin: 17rpx;
+}
+.emoji-content-img-emoji {
+  width: 56rpx;
+  height: 56rpx;
+}
+.emoji-content-img-other {
+  width: 100rpx;
+  height: 100rpx;
+}
+/*底部类别  */
+.emoji-album {
+  width: 100%;
+  height: 88rpx;
+  border: 2rpx solid #999;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.emoji-album-left {
+  display: inline-block;
+  height: 100%;
+}
+.emoji-album-left-img {
+  width:88rpx;
+  height:100%;
+  padding:8rpx 10rpx;
+  box-sizing:border-box;
+  border-right:2rpx soild #999
+}
+.emoji-send {
+  width: 88rpx;
+  height: 100%;
+  line-height:88rpx;
+  background-color: #0091e4;
+  text-align: center;
+  float: right;
+  color: #fff;
+}
+.album-active {
+  background-color: #aaa;
+}

components/inputclear/inputclear.js

+// components/inputclear/inputclear.js
+Component({
+  /**
+     * 组件的属性列表
+     */
+  properties: {
+    type: {
+      type: String,
+      value: 'text'
+    },
+    placeholder: {
+      type: String,
+      value: '请输入内容'
+    },
+    maxlength: {
+      type: Number,
+      value: 10
+    }
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    inputVal: ''
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * 输入响应
+     */
+    bindInput(e) {
+      this.setData({
+        inputVal: e.detail.value
+      })
+      this.triggerEvent('inputClearChange', { data: this.data.inputVal }, {})
+    },
+    /**
+     * 清除输入框
+     */
+    clearInput() {
+      this.setData({
+        inputVal: ''
+      })
+    },
+    /**
+     * 确定
+     */
+    confirmHandler() {
+      this.triggerEvent('inputClearFinish', { data: this.data.inputVal }, {})
+    }
+  }
+})

components/inputclear/inputclear.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

components/inputclear/inputclear.wxml

+<view class='input-clear-wrapper'>
+  <input type='{{type}}' value='{{inputVal}}' placeholder='{{placeholder}}' maxlength='{{maxlength}}' bindinput='bindInput' bindconfirm='confirmHandler'></input>
+  <icon wx:if="{{inputVal.length != 0}}" catchtap='clearInput' type='clear' size='17' class='clear-icon'></icon>
+</view>
\ No newline at end of file

components/inputclear/inputclear.wxss

+.input-clear-wrapper {
+  position: relative;
+  width: 100%;
+}
+.input-clear-wrapper input {
+  background-color: #fff;
+  width: 100%;
+  padding: 15rpx 0 15rpx 20rpx;
+}
+.input-clear-wrapper .clear-icon {
+  position: absolute;
+  top:50%;
+  right:17rpx;
+  margin-top:-17rpx;
+  z-index: 100;
+}
\ No newline at end of file

components/inputmodal/inputmodal.js

+// components/inputmodal/inputmodal.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    title: {
+      type: String,
+      value: '默认标题'
+    }
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    
+  },
+  attached: function () {
+    // let systemInfo = wx.getSystemInfoSync()
+    
+    // console.log(systemInfo)
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    cancel() {
+      this.triggerEvent('inputModalClick', {data: 'cancel'}, {})
+    },
+    confirm() {
+      this.triggerEvent('inputModalClick', { data: 'confirm' }, {})
+    }
+  }
+})

components/inputmodal/inputmodal.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

components/inputmodal/inputmodal.wxml

+<view class='inputmodal-wrapper'>
+  <view class='content'>
+    <view class='title'>{{title}}</view>
+    <view class='slot'>
+      <slot></slot>
+    </view>
+    <view class='button-group'>
+      <view class='btn' hover-class='btn-hover' style='border-right: 2rpx solid #ccc;' bindtap='cancel'>取消</view>
+      <view class='btn' hover-class='btn-hover' style='color: rgb(99,181,130);' bindtap='confirm'>确定</view>
+    </view>
+  </view>
+</view>
\ No newline at end of file

components/inputmodal/inputmodal.wxss

+.inputmodal-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .5);
+  z-index: 9998;
+}
+.inputmodal-wrapper .content {
+  width: 540rpx;
+  height: 300rpx;
+  background-color: #F3F4F6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -270rpx;
+  margin-top: -150rpx;
+  border-radius: 24rpx;
+  z-index: 9999;
+}
+.inputmodal-wrapper .content .title {
+  width:100%;
+  text-align:center;
+  line-height:114rpx;
+  font-size:34rpx;
+  color: #030303;
+}
+.inputmodal-wrapper .content .slot {
+  height: 110rpx;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+}
+.inputmodal-wrapper .content input{
+  margin: 0 auto;
+  width: 90%;
+  height: 64rpx;
+  padding: 0 8rpx;
+  line-height: 64rpx;
+  background-color: #fff;
+  border: 0 solid #4D4D4D;
+  font-size: 30rpx;
+}
+.button-group {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 84rpx;
+  display: flex;
+  flex-direction: row;
+  border-top: 2rpx solid #ccc;
+  font-size: 34rpx;
+  color: #007AFF;
+}
+.button-group .btn {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.button-group .btn-hover {
+  background-color: rgba(0, 0, 0, .1);
+}

components/swipedelete/swipedelete.js

+let startX = 0
+Component({
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    translateX: 0
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    deleteItem: function (e) {
+      this.setData({
+        translateX: 0
+      })
+      this.triggerEvent('deleteChatItem', {}, {bubbles: true})
+    },
+    /**
+     * 滑动删除事件-滑动开始
+     */
+    touchStartHandler: function(e) {
+      startX = e.touches[0].pageX
+    },
+    /**
+     * 滑动删除事件-滑动
+     */
+    touchMoveHandler: function(e) {
+      let pageX = e.touches[0].pageX
+      let moveX = pageX - startX
+      if(Math.abs(moveX) < 40) {
+        return
+      }
+      // e.target.style.WebkitTransform = `translateX(${moveX}px)`
+      if (moveX > 0) { // 右滑 隐藏删除
+        if (Math.abs(this.data.translateX) == 0) {
+          return
+        } else {
+          this.setData({
+            translateX: 0
+          })
+        }
+      } else { // 左滑 显示删除
+        if (Math.abs(this.data.translateX) >= 80) {
+          return
+        } else {
+          this.setData({
+            translateX: -80
+          })
+        }
+      }
+    }
+  }
+})

components/swipedelete/swipedelete.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

components/swipedelete/swipedelete.wxml

+<view class='swipedelete-wrapper' bindtouchmove='touchMoveHandler' bindtouchstart='touchStartHandler' style="transform:translateX({{translateX}}px)">
+  <slot></slot>
+  <view class='swipedelete-btn' bindtap='deleteItem'>删除</view>
+</view>
\ No newline at end of file

components/swipedelete/swipedelete.wxss

+.swipedelete-wrapper {
+  transition: all .4s ease;
+}
+.swipedelete-btn {
+  position:absolute;
+  top:0;
+  right:-180rpx;
+  text-align:center;
+  background: #f00;
+  color:#fff;
+  width:160rpx;
+  height:100%;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
\ No newline at end of file

pages/webview/webview.js

+// pages/webview/webview.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    newsUrl:'https://baike.baidu.com/item/'
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log("options", options)
+    let that=this;
+    if (options.name){
+      let newsUrl = that.data.newsUrl;
+      newsUrl = newsUrl + options.name;
+      that.setData({
+        newsUrl: newsUrl
+      })
+
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

pages/webview/webview.json

+{
+  "usingComponents": {},
+  "navigationStyle": "default"
+}
\ No newline at end of file

pages/webview/webview.wxml

+<view>
+  <web-view src="{{newsUrl}}"></web-view>
+</view>

pages/webview/webview.wxss

+/* pages/webview/webview.wxss */
\ No newline at end of file