We all know that small programs can not directly manipulate the DOM, so do instant messaging chat function can not be as before: Click Send, splicing a node to the page. Not much to say, the following are the effects and code:
-----------------------Chat.js------------------------------
Pages/chat/chat.jspage (initial data for {/** * page */data: {lists: [], scrolltop:100,//set scroll bar to top distance C Entence: ', length:0,},//Click Send event handler function additemfn:function () {var {lists} = This.data; var NewData = {Value:this.data.centence}; Lists.push (NewData); This.setdata ({lists:lists, centence: '}) Console.log (lists)}, Inputfunc:function (e) {This.setdata ({centence:e.detail.value})//Console.log (This.data.centence)},/** * life cycle Function--listening page loading */Onload:fun Ction (Options) {},/** * life cycle Function--listener page First render complete */Onready:function () {},/** * life cycle Function--monitor page display */On Show:function () {},/** * life cycle Function--listener page Hidden */Onhide:function () {},/** * life cycle Function--monitor page unload */onUnload : function () {},/** * page-related event handler--Listener user drop-down action */Onpulldownrefresh:function () {},/** * processing function for pull-bottom event on page */Onreachbottom:function () {},/** * Users click on the upper right corner to share */onshareappmessage:function () { }})
------------------------Chat.wxml-------------------------------
<view class= "Container" > <!--<button type= "PRIMARY" > Add </button>-- < Scroll-view class= "Scroll" scroll-y= "true" scroll-top= "{{scrolltop}}" > <block wx:for= "{{lists}}" wx:key= " *this "> <view class=" item "data-index=" {{index}} "Id=" Item{{index}} "class=" Mymsg FlexBox "> < View class= "MSG" ><view class= "eachmsg" >{{item.value}}</view><text class= "Iconfont Icon-triangle-right "></text></view> <image src= '/assets/images/chatdoc.png ' ></image > </view> </block> </scroll-view> <view class= "Bottom" > < Input placeholder= "" Auto-focus name= "centences" bindinput= ' Inputfunc ' value= "{{centence}}" Auto-focus/> <view class= ' icon ' bindtap= ' ADDITEMFN ' > <text> send </text> </view> </view ></view>
Hope to teach each other ....
Applet Instant Chat (page function only, WebSocket not received)