微信小程序：仿微信聊天界面 | 张先生的网络日志

微信小程序实例：仿微信聊天界面，实现微信聊天界面的部分功能，如长按弹出菜单，可选择复制或者删除消息。

以下是代码

wxml:

<!--test.wxml-->
<view style="padding-top:30px;">
    <view wx:for="{{loop}}" wx:key="id" bindlongtap="ltap" data-id="{{item.id}}"  class="{{item.class}}" style="display:{{item.visible}};">
        {{item.opt}} 
        <view class="sharp"></view>
        <view class="headico"><image src="{{item.head}}" mode="aspectFill" class="headimg"></image></view>
        <view wx:if="{{ item.id == value }}" class="anniu">
            <view bindtap="click_blank" class="mask"></view> 
            <view bindtap="del" class="deleteBtn" data-id="{{item.id}}">
                删除
                <view class="del-sharp"></view>
            </view>
        </view>
        <view wx:else></view>
    </view>
</view>

删除

</view>

</view>

wxss:

/* test.wxss */

.message {
  text-align: left;
  margin-top: 20px;
  margin-left: 60px;
  background: #fff;
  color: #333;
  border-radius: 5px;
  padding: 5px 20px;
  max-width: 50%;
  float: left;
  clear: both;
  border: 1px solid #dedede;
  position: relative;
}

.send {
  text-align: left;
  margin-top: 20px;
  margin-right: 60px;
  background: #a6d94e;
  border: 1px solid #a6d94e;
  color: #333;
  border-radius: 5px;
  padding: 5px 20px;
  max-width: 50%;
  float: right;
  clear: both;
  position: relative;
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 1;
}

.message .deleteBtn {
  position: absolute;
  top: -45px;
  background: #303538;
  color: #fff;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
}

.del-sharp {
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  background: #303538;
  transform: rotate(45deg);
}

.send .deleteBtn {
  position: absolute;
  top: -45px;
  background: #303538;
  color: #fff;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
}

.message .sharp {
  background: red;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  left: -5px;
  top: 12px;
  background: #fff;
  border: 1px solid #dedede;
  border-top: none;
  border-right: none;
}

.send .sharp {
  background: red;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  right: -5px;
  top: 12px;
  background: #a6d94e;
  border: 1px solid #a6d94e;
  border-top: none;
  border-right: none;
}

.message .headico {
  width: 33px;
  height: 33px;
  border: 1px solid #dedede;
  position: absolute;
  top: 0;
  left: -50px;
  background: #fff;
}

.send .headico {
  width: 33px;
  height: 33px;
  border: 1px solid #dedede;
  position: absolute;
  top: 0;
  right: -50px;
  background: #fff;
}

.headimg {
  width: 33px;
  height: 33px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

/* test.wxss */

.message {

text-align: left;

margin-top: 20px;

margin-left: 60px;

background: #fff;

color: #333;

border-radius: 5px;

padding: 5px 20px;

max-width: 50%;

float: left;

clear: both;

border: 1px solid #dedede;

position: relative;

}

.send {

text-align: left;

margin-top: 20px;

margin-right: 60px;

background: #a6d94e;

border: 1px solid #a6d94e;

color: #333;

border-radius: 5px;

padding: 5px 20px;

max-width: 50%;

float: right;

clear: both;

position: relative;

}

.mask {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

opacity: 0.8;

z-index: 1;

}

.message .deleteBtn {

position: absolute;

top: -45px;

background: #303538;

color: #fff;

z-index: 2;

padding: 5px 10px;

border-radius: 5px;

}

.del-sharp {

width: 8px;

height: 8px;

position: absolute;

bottom: -4px;

background: #303538;

transform: rotate(45deg);

}

.send .deleteBtn {

position: absolute;

top: -45px;

background: #303538;

color: #fff;

z-index: 2;

padding: 5px 10px;

border-radius: 5px;

}

.message .sharp {

background: red;

width: 10px;

height: 10px;

transform: rotate(45deg);

position: absolute;

left: -5px;

top: 12px;

background: #fff;

border: 1px solid #dedede;

border-top: none;

border-right: none;

}

.send .sharp {

background: red;

width: 10px;

height: 10px;

transform: rotate(45deg);

position: absolute;

right: -5px;

top: 12px;

background: #a6d94e;

border: 1px solid #a6d94e;

border-top: none;

border-right: none;

}

.message .headico {

width: 33px;

height: 33px;

border: 1px solid #dedede;

position: absolute;

top: 0;

left: -50px;

background: #fff;

}

.send .headico {

width: 33px;

height: 33px;

border: 1px solid #dedede;

position: absolute;

top: 0;

right: -50px;

background: #fff;

}

.headimg {

width: 33px;

height: 33px;

}

js:

// test.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        loop: [
            {
                opt: "监听页面加载",
                id: 1,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
            {
                opt: "监听页面初次渲染完成",
                id: 2,
                head: '../images/icon_contact_wx.png',
                class: 'send',
                visible: 'block'
            },
            {
                opt: "监听用户下拉动作",
                id: 3,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
            {
                opt: "页面上拉触底事件的处理函数",
                id: 4,
                head: '../images/icon_contact_wx.png',
                class: 'send',
                visible: 'block'
            },
            {
                opt: "用户点击右上角分享",
                id: 5,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
        ],
        value: 0
    },
    ltap: function (e) {
        this.setData({
            value: e.target.dataset.id
        })
    },
    del: function (e) {
        var index = e.target.dataset.id - 1
        var param = {};
        var string = "loop[" + index + "].visible"
        param[string] = 'none';
        this.setData(param);
    },
    click_blank: function (e) {
        this.setData({
            value: 0
        })
    }
})

// test.js

Page({

/**

* 页面的初始数据

data: {

loop: [

{

opt: "监听页面加载",

id: 1,