Summary of MUI image with text rotation, pull-up loading more display, no more information, rich text content display, etc

Posted by srinivas6203 on Sat, 01 Feb 2020 02:16:49 +0100

1, Picture rotation with text (floating Title below)

For details, please refer to the code in helloMUI, mainly adding a p tag under the picture and class' Mui slider title '. Remember to change the sliding dot class to Mui text right

<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- One additional node(Round robin: the first node is the last round robin) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/yuantiao.jpg">
							<p class="mui-slider-title">Watching the world quietly</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">Happiness is sleeping together</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/muwu.jpg">
							<p class="mui-slider-title">Want a wooden house like this, drink coffee quietly</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">Watching the world quietly</p>
						</a>
					</div>
					<!-- One additional node(Round robin: the last node is the first round robin) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">Happiness is sleeping together</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>

2, Pull up to load more displays no more information

Mui ('× refreshcontainer'). Pullrefresh(). Endpulluptorefresh (parameter); / / if the parameter is true, there is no more data.

3, Rich text content display

When the rich text content is displayed in html code, consider the following methods

1. innerText can be used instead of innerHTML. (I haven't tried it myself)

2. Use v-html of vue

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

Using vue is really easy and powerful.

Topics: Vue