RT
微信网站上的左滑菜单出现操作按钮,
用百度的touch.js做了一个,但是微信里有问题,滑动完需要点击一下页面上的按钮什么的才会出现滑动效果。
该怎么做呀
代码:
<ul class="am-list app_list_striped app_list app_list_boxShadow">
<li id="app_list_action1">
<div class="app_list_item" href="">
<div class="app_list_icon">
<img src="" alt="">
</div>
<div class="app_list_content">
<span>我的診療</span>
<i class="am-icon-angle-right"></i>
</div>
</div>
<div class="app_list_action">
<button type="button" class="am-btn am-btn-primary">電話</button>
<button type="button" class="am-btn am-btn-primary">電話</button>
</div>
</li>
<li id="app_list_action2">
<div class="app_list_item" href="">
<div class="app_list_icon">
<img src="" alt="">
</div>
<div class="app_list_content">
<span>我的診療</span>
<i class="am-icon-angle-right"></i>
</div>
</div>
<div class="app_list_action">
<button type="button" class="am-btn am-btn-primary">電話</button>
<button type="button" class="am-btn am-btn-primary">電話</button>
</div>
</li>
<li id="app_list_action3">
<div class="app_list_item" href="">
<div class="app_list_icon">
<img src="" alt="">
</div>
<div class="app_list_content">
<span>我的診療</span>
<i class="am-icon-angle-right"></i>
</div>
</div>
<div class="app_list_action">
<button type="button" class="am-btn am-btn-primary">電話</button>
<button type="button" class="am-btn am-btn-primary">電話</button>
</div>
</li>
</ul>
js-touch.js
touch.on($("#app_list_action1"), 'swipeleft', function(ev) {
// ev.preventDefault();
$("#app_list_action1").css("webkit-transition", "all ease .2s");
$("#app_list_action1").css("webkit-transform", "translateX(-133px)");
console.log(this);
});
touch.on($("#app_list_action1"), 'swiperight', function(ev) {
// ev.preventDefault();
$("#app_list_action1").css("webkit-transition", "all ease .2s");
$("#app_list_action1").css("webkit-transform", "translateX(0px)");
console.log(this);
});
试试ionic吧,好像有个现成的空间,就是这种左划能出选项