Flask开发微电影网站(九)
1.后台管理之电影管理
1.1 电影管理之所有电影收藏列表
1.1.1 电影管理之电影收藏列表视图函数
在admin目录下的views.py文件中定义电影收藏列表视图函数
电影收藏列表视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
@admin.route('/moviecol/list/<int:page>/', methods=["GET"])
@admin_login_req
@admin_auth
def moviecol_list(page=None):
if page is None:
page = 1
page_data = Moviecol.query.join(Movie).join(User).filter(
Movie.id == Moviecol.movie_id,
User.id == Moviecol.user_id
).order_by(Moviecol.addtime).paginate(page=page, per_page=10)
return render_template("admin/moviecol_list.html", page_data=page_data)
1.1.2 电影管理之电影收藏列表前端页面
电影收藏列表前端页面继承admin.html页面,还需要导入admin_page.html页面以实现分页效果
{% extends 'admin/admin.html' %}
{% import "ui/admin_page.html" as pg %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 收藏管理</a></li>
<li class="active">收藏列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">收藏列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<!--消息提示-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<table class="table table-hover">
<tbody>
<tr>
<th>ID</th>
<th>电影</th>
<th>用户</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
{% for v in page_data.items %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.movie.title }}</td>
<td>{{ v.user.name }}</td>
<td>{{ v.addtime }}</td>
<td>
<a href="{{ url_for('admin.moviecol_del',id=v.id) }}" class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pg.page(page_data,"admin.moviecol_list") }}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-7").addClass('active');
$("#g-7-1").addClass('active');
});
{% endblock %}
1.2 电影管理之删除电影收藏
1.2.1 电影管理之删除电影收藏视图函数
在admin目录下的views.py文件中定义删除电影视图函数
删除电影视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
@admin.route("/moviecol/del/<int:id>/", methods=['GET'])
@admin_login_req
@admin_auth
def moviecol_del(id=None):
moviecol = Moviecol.query.get_or_404(int(id))
db.session.delete(moviecol)
db.session.commit()
flash("删除收藏成功", "ok")
return redirect(url_for("admin.moviecol_list", page=1))
2.后台管理之日志管理
2.1 日志管理之用户操作列表
2.1.1 日志管理之用户操作日志列表视图函数
在admin目录下的views.py文件中定义用户操作日志列表视图函数
用户操作日志列表视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
# 用户操作日志
@admin.route('/oplog/list/<int:page>/', methods=['GET'])
@admin_login_req
@admin_auth
def oplog_list(page=None):
if page is None:
page = 1
page_data = Oplog.query.join(Admin).filter(Admin.id == Oplog.admin_id).order_by(
Oplog.addtime
).paginate(page=page, per_page=5)
return render_template("admin/oplog_list.html", page_data=page_data)
2.1.2 日志管理之用户操作日志列表前端页面
用户操作日志列表前端页面继承admin.html页面,还需要导入admin_page.html页面以实现分页效果
{% extends 'admin/admin.html' %}
{% import 'ui/admin_page.html' as pg %}
{% block content %}
<!--内容-->
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">操作日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">操作日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员</th>
<th>操作时间</th>
<th>操作原因</th>
<th>操作IP</th>
</tr>
{% for v in page_data.items %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.admin.name }}</td>
<td>{{ v.addtime }}</td>
<td>{{ v.reason }}</td>
<td>{{ v.ip }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pg.page(page_data,'admin.oplog_list') }}
</div>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-8").addClass('active');
$("#g-8-1").addClass('active');
});
{% endblock %}
2.2 日志管理之管理员登录日志
2.2.1 日志管理之管理员登录日志视图函数
在admin目录下的views.py文件中定义管理员登录日志视图函数
管理员登录日志视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
# 管理员登录日志
@admin.route('/adminloginlog/list/<int:page>/', methods=['GET'])
@admin_login_req
@admin_auth
def adminloginlog_list(page=None):
if page is None:
page = 1
page_data = Adminlog.query.join(Admin).filter(Admin.id == Adminlog.admin_id).order_by(
Adminlog.addtime
).paginate(page=page, per_page=5)
print(page_data.__dict__)
return render_template("admin/adminloginlog_list.html", page_data=page_data)
2.2.2 日志管理之管理员登录日志前端页面
管理员登录日志前端页面继承admin.html页面,还需要导入admin_page.html页面以实现分页效果
{% extends 'admin/admin.html' %}
{% import 'ui/admin_page.html' as pg %}
{% block content %}
<!--内容-->
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">管理员登录日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">管理员登录日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员</th>
<th>登录时间</th>
<th>登录IP</th>
</tr>
{% for i in page_data.items %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.admin.name }}</td>
<td>{{ v.addtime }}</td>
<td>{{ v.ip }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pg.page(page_data,'admin.adminloginlog_list') }}
</div>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-8").addClass('active');
$("#g-8-2").addClass('active');
});
{% endblock %}
2.3 日志管理之会员登录日志
2.3.1 日志管理之会员登录日志列表视图函数
在admin目录下的views.py文件中定义会员登录日志列表视图函数
会员登录日志列表视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
# 会员登录日志
@admin.route('/userloginlog/list/<int:page>/', methods=['GET'])
@admin_login_req
@admin_auth
def userloginlog_list(page=None):
if page is None:
page = 1
page_data = Userlog.query.join(User).filter(User.id == Userlog.user_id).order_by(
Userlog.id
).paginate(page=page, per_page=10)
print(page_data)
return render_template("admin/userloginlog_list.html", page_data=page_data)
2.3.2 日志管理之会员登录日志前端页面
会员登录日志前端页面继承admin.html页面,还需要导入admin_page.html页面以实现分页效果
{% extends 'admin/admin.html' %}
{% import 'ui/admin_page.html' as pg %}
{% block content %}
<!--内容-->
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">会员登录日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">会员登录日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>会员</th>
<th>登录时间</th>
<th>登录IP</th>
</tr>
{% for v in page_data.items %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.user.name }}</td>
<td>{{ v.addtime }}</td>
<td>{{ v.ip }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pg.page(page_data,'admin.userloginlog_list') }}
</div>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-8").addClass('active');
$("#g-8-3").addClass('active');
});
{% endblock %}
3.后台管理之权限管理
3.1 定义权限表单
在app的admin目录的forms.py文件中,定义权限表单
# 权限表单
class AuthForm(FlaskForm):
name = StringField(
label="权限名称",
validators=[
DataRequired("请输入权限名称!")
],
description="权限名称",
render_kw={
"class": "form-control",
"placeholder": "请输入权限名称!",
}
)
url = StringField(
label="权限",
validators=[
DataRequired("请输入权限地址!")
],
description="权限地址",
render_kw={
"class": "form-control",
"placeholder": "请输入权限地址!"
}
)
submit = SubmitField(
"添加",
render_kw={
"class": "btn btn-primary",
}
)
3.2 权限管理之所有权限列表
3.2.1 权限管理之权限列表视图函数
在admin目录下的views.py文件中定义权限列表视图函数
权限列表视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
@admin.route('/auth/list/<int:page>/', methods=['GET'])
@admin_login_req
@admin_auth
def auth_list(page=None):
if page is None:
page = 1
page_data = Auth.query.order_by(Auth.id).paginate(page=page, per_page=10)
return render_template("admin/auth_list.html", page_data=page_data)
3.2.2 权限管理之权限列表前端页面
权限列表前端页面继承admin.html页面,还需要导入admin_page.html页面以实现分页效果
{% extends 'admin/admin.html' %}
{% import "ui/admin_page.html" as pg %}
{% block content %}
<!--内容-->
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 权限管理</a></li>
<li class="active">权限列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<!--消息提示-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<div class="box-header">
<h3 class="box-title">权限列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>名称</th>
<th>地址</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
{% for v in page_data.items %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.name }}</td>
<td>{{ v.url }}</td>
<td>{{ v.addtime }}</td>
<td>
<a href='{{ url_for("admin.auth_edit",id=v.id) }}' class="label label-success">编辑</a>
<a href='{{ url_for("admin.auth_del",id=v.id) }}'
class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pg.page(page_data,"admin.auth_list") }}
</div>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-9").addClass('active');
$("#g-9-2").addClass('active');
});
{% endblock %}
3.3 权限管理之添加权限
3.3.1 权限管理之添加权限视图函数
在admin目录下的views.py文件中定义添加权限视图函数
添加权限视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
@admin.route('/auth/add/', methods=["GET", "POST"])
@admin_login_req
@admin_auth
def auth_add():
form = AuthForm()
if form.validate_on_submit():
data = form.data
auth = Auth(
name=data.get('name'),
url=data.get('url'),
)
db.session.add(auth)
db.session.commit()
flash("添加权限成功!", "ok")
return redirect(url_for("admin.auth_list", page=1))
return render_template("admin/auth_add.html", form=form)
3.3.2 权限管理之添加权限前端页面
添加权限前端页面继承admin.html页面
{% extends 'admin/admin.html' %}
{% block content %}
<!--内容-->
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 权限管理</a></li>
<li class="active">添加权限</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加权限</h3>
</div>
<form role="form" method="post">
<div class="box-body">
<!--提示框消息闪现-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_name">{{ form.name.label }}</label>
{{ form.name }}
<!--报错信息-->
{% for err in form.name.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_url">{{ form.url.label }}</label>
{{ form.url }}
<!--报错信息-->
{% for err in form.url.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-9").addClass('active');
$("#g-9-1").addClass('active');
});
{% endblock %}
3.4 权限管理之编辑权限
3.4.1 权限管理之编辑权限视图函数
在admin目录下的views.py文件中定义编辑权限视图函数
编辑权限视图函数需要被
登录控制装饰器和权限控制装饰器同时装饰
@admin.route("/auth/edit/<int:id>/", methods=['GET', 'POST'])
@admin_login_req
@admin_auth
def auth_edit(id=None):
form = AuthForm()
auth = Auth.query.get_or_404(id)
if form.validate_on_submit():
data = form.data
auth.name = data.get("name")
auth.url = data.get('url')
db.session.add(auth)
db.session.commit()
flash("修改权限成功!", "ok")
return redirect(url_for("admin.auth_list", page=1))
return render_template("admin/auth_edit.html", form=form, auth=auth)
3.4.2 权限管理之编辑权限前端页面
编辑权限前端页面继承admin.html页面
{% extends 'admin/admin.html' %}
{% block content %}
<!--内容-->
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 权限管理</a></li>
<li class="active">添加权限</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加权限</h3>
</div>
<form role="form" method="post">
<div class="box-body">
<!--提示框消息闪现-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_name">{{ form.name.label }}</label>
{{ form.name(value=auth.name) }}
<!--报错信息-->
{% for err in form.name.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_url">{{ form.url.label }}</label>
{{ form.url(value=auth.url) }}
<!--报错信息-->
{% for err in form.url.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-9").addClass('active');
$("#g-9-1").addClass('active');
});
{% endblock %}
3.5 权限管理之删除权限
3.5 权限管理之删除权限视图函数
在admin目录下的views.py文件中定义删除权限视图函数
删除权限视图函数需要被登录控制装饰器和权限控制装饰器同时装饰
@admin.route("/auth/del/<int:id>/", methods=["GET"])
@admin_login_req
@admin_auth
def auth_del(id=None):
auth = Auth.query.filter_by(id=id).first_or_404()
db.session.delete(auth)
db.session.commit()
flash("删除权限成功!", "ok")
return redirect(url_for("admin.auth_list", page=1))
Flask开发微电影网站(九)的更多相关文章
- Flask开发微电影网站(一)
1.用到的Flask知识 1.使用整形,浮点型,路径型,字符串型下正则表达式路由转化器 2.使用GET与POST请求,上传文件,cookie获取与响应,404处理 3.使用模板自动转义,定义过滤器,定 ...
- Flask开发微电影网站(三)
页面完成后的最终布局 可以看到,页面共同的部分是顶部导航和底部导航 所以我们可以把页面顶部导航和底部导航部分单独定义一个文件home.html,然后让需要使用顶部导航和底部导航的页面都继承home.h ...
- Flask开发微电影网站(五)
后台管理页面是系统管理员登录后对网站进行管理的前端页面 后台登录页面,如下图所示 管理员登录后的页面,如下图所示 管理员登录后,在右上角显示的管理员信息,如下图所示 管理员登录后,在页面中间部分的左侧 ...
- Flask开发微电影网站(七)
1.后台管理之电影管理 1.1 定义电影表单 在app的admin目录的forms.py文件中,定义电影表单 # 电影表单 class MovieForm(FlaskForm): title = St ...
- Flask开发微电影网站(六)
1. 后台管理登录功能实现 1.1 后台管理页面登录表单LoginForm 在app的admin目录下创建forms.py文件,用来保存admin蓝图中需要使用到的表单 from flask_wtf ...
- Flask开发微电影网站(二)
1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机,进入MaridDB数据库提示符,创建movie数据库 create ...
- Flask开发微电影网站(十)
1.后台管理之角色管理 1.1 角色管理之定义角色表单 在app的admin目录的forms.py文件中,定义角色表单 # 角色表单 class RoleForm(FlaskForm): name = ...
- Flask开发微电影网站(八)
1.后台管理之电影预告管理 1.1 定义电影预告表单 在app的admin目录的forms.py文件中,定义电影预告表单 # 预告表单 class PreviewForm(FlaskForm): ti ...
- Flask开发微电影网站(四)
会员中心页面,如下图所示 用户登录后,修改密码页面,如下图所示 用户查看自己的评论页面,如下图所示 用户查看自己的登录日志页面,如下图所示 用户查看自己收藏的电影的页面,如下图所示 1. 定义用户主页 ...
随机推荐
- PHP artisan migrate 报错显示 could not find driver ,怎么办?
记录下自己的错误 一. 1.原因是没有pdo扩展导致的, 2.解决办法:打开php.ini,然后去掉以下两行代码之前的分号(:)即可.如下: extension=php_pdo_firebird.dl ...
- 一键分享代码(提供能分享到QQ空间、新浪微博、人人网等的分享功能)
<html> <head></head> <body> <div class="xl_2"> <span styl ...
- python之路7-正则表达式
正则表达式用于做字符串匹配,在python中用re模块来操作 生成正则的在线工具:http://tool.chinaz.com/regex
- 解决mysql中文乱码问题 在url后面添加?characterEncoding=utf8
- VS界面控件大小调整
vs2015 ,配置名称显示不全,怎么才能把这个搞宽? 这个问题困扰时间挺长了, 对vs的应用仅限于敲代码.编译, 其他的功能了解甚少, 于是试着在右键菜单中找到了界面自定义窗口, 如下: 找到想要修 ...
- 安装 SIP 服务器
SIP服务器: OpenSIPS(Open SIP S erver)是SIP服务器的一个成熟的开源实现.OpenSIPS不仅仅是一个SIP代理/路由器,因为它包含应用程序级别的功能.作为SIP服务器的 ...
- centos6/7安装java和maven
下载安装包并解压到相关目录即可 编辑环境变量vim /etc/profile.d/maven.sh export JAVA_HOME=/app/soft/java-1.8.0_181 export J ...
- 越光后端开发——ygapi(2.新建Model)
1.新建Model 1.users数据 1.在apps/users/models.py中: from datetime import datetime from django.db import mo ...
- Day041--CSS, 盒模型, 浮动
内容回顾 表单标签 input type text 普通的文本 password 密码 radio 单选 默认选中添加checked 互斥的效果 给radio标签添加 相同的name checkbo ...
- 微信小程序之 3d轮播(swiper来实现)
以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...