MUI带文字的图片轮播、上拉加载更多显示没有更多信息、富文本内容显示等总结

一.带文字的图片轮播（下放悬浮标题）

具体可以参考helloMUI里面的代码，主要是在图片下加多一个p标签，并追加class ‘mui-slider-title’，记得滑动的圆点class改为mui-text-right

<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/yuantiao.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/muwu.jpg">
							<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/cbd.jpg">
							<p class="mui-slider-title">Color of SIP CBD</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/yuantiao.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

二.上拉加载更多显示没有更多信息

mui('#refreshContainer').pullRefresh().endPullupToRefresh(参数); //参数为true代表没有更多数据了。

三.富文本内容显示

出现富文本内容显示出来都是html代码的时候，可以考虑下面的方法

1.可以使用innerText，不行就innerHTML。（我自己没试过）

2.使用vue的v-html

<div class="news_content" v-html="content"></div>

使用vue真的很省事，强大的框架。