h5+swiper仿微信聊天界面|微信表情滑屏

xiaoyan2015 · 发表于 2018-6-13 23:41:38

h5仿微信效果|h5仿微信界面实例|h5+swiper仿微信表情滑动
近几天得空有些时间整理下之前做的h5仿微信聊天项目，是使用到了h5+css3+zepto+weui+wcPop+swiper等混合技术进行开发的手机端微信实例，实现了预览图片、播放视频及发送消息、表情，打赏、霸屏、发红包等微场景功能，长按消息可以浮动定位弹出操作菜单。

<link rel="stylesheet" href="css/swiper-3.4.1.min.css" />
<script src="js/swiper-3.4.1.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
observer: true,
observeParents: true,
pagination: '.swiper-pagination',
paginationClickable: true,
autoplayDisableOnInteraction: false
})
</script>

复制代码

<div id="dialogs">
<div class="weui-mask" style="display: none;"></div>
<div class="js_dialog" id="J_Dialog_hongbao" style="display: none;">
<div class="weui-dialog">
<i class="weui-xclose"></i>
<div class="weui-dialog__bd">
<div class="ws__popup-template">
<div class="item flexbox">
<label class="txt">总金额</label><input class="ipt-txt flex1" type="tel" name="hbAmount" placeholder="0.00" /><em class="unit">元</em>
</div>
<div class="item flexbox">
<label class="txt">红包个数</label><input class="ipt-txt flex1" type="tel" name="hbNum" placeholder="填写个数" /><em class="unit">个</em>
</div>
<div class="tips">在线人数共<em class="memNum">186</em>人</div>
<div class="item item-area">
<textarea class="describe" name="content" placeholder="恭喜发财，大吉大利"></textarea>
</div>
<div class="amountTotal">￥<em class="num">0.00</em></div>
</div>
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">塞钱进红包</a>
</div>
</div>
</div>
<div class="js_dialog" id="J_Dialog_baping" style="display: none;">
<div class="weui-dialog">
<i class="weui-xclose"></i>
<div class="weui-dialog__bd">
<div class="ws__popup-template">
<div class="item flexbox">
<input class="ipt-txt align-l flex1" type="text" name="bpTimeline" placeholder="选择霸屏时长" readonly />
</div>
<div class="item item-upload flexbox">
<div class="ws__uploader-panel">
<input class="ws__uploader-input" id="J__uploaderIpt" type="file" accept="image/*" />
<div class="ws__uploader-tips">
<i></i>
<p>添加图片</p>
</div>
</div>
</div>
<div class="item item-area">
<textarea class="describe" name="content" placeholder="添加文字"></textarea>
</div>
</div>
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">我要霸屏</a>
</div>
</div>
</div>
<div class="js_dialog" id="J_Dialog_dashang" style="display: none;">
<div class="weui-dialog">
<i class="weui-xclose"></i>
<div class="weui-dialog__bd">
<div class="ws__popup-template">
<h2 class="hdTit">为喜欢的节目霸屏打赏</h2>
<div class="item flexbox">
<input class="ipt-txt align-l flex1" type="text" name="dschooseProgram" placeholder="选择打赏节目" readonly />
</div>
<div class="item item-area">
<textarea class="describe" name="content" placeholder="输入打赏语，30字以内（选填）"></textarea>
</div>
<div class="item item-gift" id="J__chooseGift">
<div class="gift flexbox selected" data-gift="001">
<label class="txt"><span>豪车</span><em class="time">霸屏50秒</em></label>
<span class="amount">￥<em>12</em> <i class="chkbox"></i></span>
</div>
<div class="gift flexbox" data-gift="002">
<label class="txt"><span>动人玫瑰</span><em class="time">霸屏20秒</em></label>
<span class="amount">￥<em>8</em> <i class="chkbox"></i></span>
</div>
</div>
</div>
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">支付 <span>￥<em class="moneyNum">12</em></span> 打赏</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
/* ---红包事件.start */
//红包弹窗
$(".J__chatHongbao").on("click", function(){
$("#J_Dialog_hongbao").show();
$("#dialogs .weui-mask").fadeIn(200);
});
//确定
$("#J_Dialog_hongbao").on("click", ".weui-dialog__btn_primary", function(){
alert("塞钱成功！");
$(".weui-xclose").trigger("click");
});
/* ---红包事件.end */
/* ---霸屏事件.start */
//霸屏弹窗
$(".J__chatBaping").on("click", function(){
$("#J_Dialog_baping").show();
$("#dialogs .weui-mask").fadeIn(200);
});
//霸屏时长picker
$("input[name='bpTimeline']").on("click", function(){
var that = $(this);
weui.picker([{
label: '10s　￥8',
value: 8
},{
label: '20s　￥16',
value: 16
},{
label: '30s　￥24',
value: 24
},{
label: '40s　￥32',
value: 32
},{
label: '50s　￥40',
value: 40
},{
label: '60s　￥48',
value: 48
}], {
onChange: function(res){
console.log(res);
},
onConfirm: function(res){
console.log(res);
that.val("￥" + res);
}
}
);
});
//确定
$("#J_Dialog_baping").on("click", ".weui-dialog__btn_primary", function(){
alert("霸屏成功！");
$(".weui-xclose").trigger("click");
});
/* ---霸屏事件.end */
/* ---打赏事件.start */
//打赏弹窗
$(".J__chatDashang").on("click", function(){
$("#J_Dialog_dashang").show();
$("#dialogs .weui-mask").fadeIn(200);
});
//打赏节目picker
$("input[name='dschooseProgram']").on("click", function(){
var that = $(this);
weui.picker([{
label: '小品：送礼',
value: '小品：送礼'
},{
label: '歌曲：红日',
value: '歌曲：红日'
},{
label: '相声：就服你',
value: '相声：就服你'
},{
label: '歌曲：上海滩',
value: '歌曲：上海滩'
},{
label: '小品：回家过年',
value: '小品：回家过年'
},{
label: '相声：逗你玩',
value: '相声：逗你玩'
}], {
onChange: function(res){
console.log(res);
},
onConfirm: function(res){
console.log(res);
that.val(res);
}
}
);
});
//选择礼物
$("#J__chooseGift .gift").on("click", function(){
$(this).addClass("selected").siblings().removeClass("selected");
$("#J_Dialog_dashang .moneyNum").text($(this).find(".amount em").text());
console.log($(this).attr("data-gift"));
});
//确定
$("#J_Dialog_dashang").on("click", ".weui-dialog__btn_primary", function(){
alert("打赏成功！");
$(".weui-xclose").trigger("click");
});
/* ---打赏事件.end */
//右上角xx关闭弹窗
$(".weui-xclose").on("click", function(){
$(this).parents(".js_dialog").hide();
$("#dialogs .weui-mask").fadeOut(200);
});
});
</script>

复制代码

欢迎大家一起交流学习企鹅号：（282310962） wx：（xy190310）

xiaoyan2015 · 发表于 2018-11-21 22:46:03

https://cloud.tencent.com/developer/user/2158748