移动端的一个js效果：手滑动向上向下滚动li标签
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端的一个js效果：手滑动向上向下滚动li标签相关的知识，希望对你有一定的参考价值。
样式如上图 ul内的li标签 我需要用jquery或者js实现手滑动向上或者向下显示更多学校 求大神帮忙 在线等 求源码
试试以下代码：
<!DOCTYPE html><html>
<head>
<mata charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on("pageinit","#pageone",function()
$(document).on("scrollstop",function()
alert("停止滚动！");
);
);
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>scrollstop 事件</h1>
</div>
<div data-role="content">
<p><b>提示：</b>如果未出现滚动条，请尝试调整窗口尺寸。</p>
<ul data-inset="true">
<li data-role="list-divider">信息列表</li>
<li data-role="fieldcontain">大学1</li>
<li data-role="fieldcontain">大学大学2</li>
<li data-role="fieldcontain">大学大学3</li>
<li data-role="fieldcontain">大学大学4</li>
<li data-role="fieldcontain">信息大学5</li>
<li data-role="fieldcontain">大学6</li>
<li data-role="fieldcontain">大学信息7</li>
<li data-role="fieldcontain">信息大学8</li>
<li data-role="fieldcontain">信息大学大学9</li>
<li data-role="fieldcontain">信息大学10</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
<li data-role="fieldcontain">信息大学11</li>
<li data-role="fieldcontain">信息大学12</li>
</ul>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>追问
好像不行啊 出来的是乱码啊
追答乱码是编码的问题，你设置一下网页的编码
参考技术A 上网查一下追问查不到、、、、
在 UIView 上向下和向上滑动，但滚动视图阻碍它迅速？
【中文标题】在 UIView 上向下和向上滑动，但滚动视图阻碍它迅速？【英文标题】：Swipe down and up on UIView working but scrollview hindering it swift? 【发布时间】：2018-12-13 10:54:06 【问题描述】：我已经搜索了谷歌，但不幸的是无法找到我的查询的解决方案，所以最后我想把它贴在这里。我有一个 UIViewController ，其中包含一个具有 UIView 和 tableView 的 ScrollView。在那个 UIView 上，我已经应用了手势：向右、向左、向上和向下滑动并点击手势。 Right ， Left 和 Tap 手势工作正常，但 up 和 down 手势不起作用（无法识别）。这是因为它们包含在滚动视图中，并且当做出向上和向下滑动手势时，滚动视图会向上和向下移动，因此阻碍了应用于 UIView 的滑动手势。已附上该场景的屏幕截图。任何帮助将不胜感激。
现在我的问题是：当在 tableView 上单击（执行滚动）时，单元格应该是可滚动的，那时整个视图不应该滚动，并且当在包含 UIImage 的 UIView 上执行手势时（上下滑动手势）整个视图不应再次滚动。希望我能够传达我的疑问。
//这是整个类的代码。
import UIKit
class TableViewVC: UIViewController,UIGestureRecognizerDelegate
@IBOutlet weak var headerView: UIView!
@IBOutlet weak var scrollView: UIScrollView!
var names = ["Anurag","Tushar","Deepamkar","Karnail","Anurag","Tushar","Deepamkar","Karnail","Anurag","Tushar","Deepamkar","Karnail","Anurag","Tushar","Deepamkar","Karnail","Anurag","Tushar","Deepamkar","Karnail"]
override func viewDidLoad()
super.viewDidLoad()
let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(self.respondToSwipeGesture))
swipeRight.direction = UISwipeGestureRecognizerDirection.right
self.headerView.addGestureRecognizer(swipeRight)
let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(self.respondToSwipeGesture))
swipeLeft.direction = UISwipeGestureRecognizerDirection.left
self.headerView.addGestureRecognizer(swipeLeft)
let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(self.respondToSwipeGesture))
swipeDown.direction = UISwipeGestureRecognizerDirection.down
self.headerView.addGestureRecognizer(swipeDown)
let swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(self.respondToSwipeGesture))
swipeDown.direction = UISwipeGestureRecognizerDirection.up
self.headerView.addGestureRecognizer(swipeUp)
let tap = UITapGestureRecognizer(target: self, action: #selector(self.respondToTapGesture))
self.headerView.addGestureRecognizer(tap)
@objc func respondToSwipeGesture(gesture: UIGestureRecognizer)
if let swipeGesture = gesture as? UISwipeGestureRecognizer
switch swipeGesture.direction
case UISwipeGestureRecognizerDirection.right:
print("Swiped right")
case UISwipeGestureRecognizerDirection.down:
print("Swiped down")
case UISwipeGestureRecognizerDirection.left:
print("Swiped left")
case UISwipeGestureRecognizerDirection.up:
print("Swiped up")
default:
break
@objc func respondToTapGesture(gesture: UIGestureRecognizer)
if gesture is UITapGestureRecognizer
print("Tapped")
extension TableViewVC : UITableViewDataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
return names.count
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
let cell = tableView.dequeueReusableCell(withIdentifier: "cell1", for: indexPath) as! TableViewCell1
cell.textLabel?.text = names[indexPath.row]
return cell
【问题讨论】：
为什么要把TableView和UIView放在scrollview里面..？只要把那些从滚动视图中拿出来，我想你的代码就可以了。 @ShrutiThombre 在这个 UI 中有一个 topView（在 UI 中缺失）在 headerView（这里包含 UIimageView）之上。所以我希望滚动所有内容，包括 topView、HeadeView 和 TableView 并启用手势（在 headerView 上上下）。但是，当在 headerView 上上下滑动时，会调用 scrollView 的滚动并且不会调用滑动手势。这就是问题所在，因此我必须使用滚动视图，以便所有视图都是可滚动的。 为什么不把这个UIView设置为UITableView的header呢？ @TalCohen 做到了，但是在标题视图上完成滑动手势（向上和向下）滚动 tableView 并再次在标题视图上滑动没有被调用。 把视图放在滚动视图的顶部怎么样？ 【参考方案1】：实现 UISwipeGestureRecognizer 委托
let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(self.respondToSwipeGesture))
swipeRight.direction = UISwipeGestureRecognizerDirection.right
swipeRight.delegate = self
self.headerView.addGestureRecognizer(swipeRight)
func gestureRecognizer(gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWithGestureRecognizer otherGestureRecognizer: UIGestureRecognizer) -> Bool
return true
【讨论】：
以上是关于移动端的一个js效果：手滑动向上向下滚动li标签的主要内容，如果未能解决你的问题，请参考以下文章