【代码记录001】尝试用阿里的移动端框架 SUI Mobile 建一个首页页面

下面是运行结果和原代码，像bootstrap一样，不过这个SUI Mobile是偏向移动端的，用框架写前端会比较省时间基本免去了css和js的书写，自己想写也随时写SUI框架地址http://m.sui.taobao.org/<!DOCTYPE html><html><head><title>cesh...

浪淘三千

1002人浏览 · 2019-08-15 02:03:01

浪淘三千 · 2019-08-15 02:03:01 发布

（20200520补充：后来了解了更多以后大家网站开发用的element ui 小程序用vant weapp 都挺香的）

下面是运行结果和原代码，像bootstrap一样，不过这个 SUI Mobile 是偏向移动端的，用框架写前端会比较省时间基本免去了css和js的书写，自己想写也随时写

SUI框架地址

http://m.sui.taobao.org/

<!DOCTYPE html>
<html>
<head>
	<title>ceshi</title>
	 <meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">

<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

<link rel="stylesheet" href="dist/css/swiper.min.css"> 
<!--这个css还有尾部的js是别的专门的幻灯片工具 需要的话去官网下载就可以 里面有好多写好的demo https://www.swiper.com.cn/ --> 

<style type="text/css">
	.swiper-slide{
		background-color: red;
		width: 100%;
		height: 200px;
	}
	.swiper-slide img{
		width: 100%;
		height: 200px;
	}
	.center-col33-text{
		margin-top: 1.5rem;
		text-align: center;
	}
	
</style>

</head>
<body style="background-color: #fff">
	<script src="./dist/js/swiper.min.js"></script>

<!-- 下面这个div是为了设置一个窗口的大小 避免底部tab被拖动	 -->
<div style="
	position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    top: 0;
    overflow-y: auto;
	overflow-x: hidden;">

	<header class="bar bar-nav" style="position: fixed;">
	  <h1 class="title">首页</h1>
	</header>
		

	<!-- 轮播 -->
	<div class="swiper-container" style="position: relative; margin-top: 2rem;">
	    <div class="swiper-wrapper">
			<div class="swiper-slide"><img  src="https://mmbiz.qpic.cn/mmbiz/6U0PibXibmoiat48qDH0c1QSibKXa5uicibZibsiaanak4W4ZBBbyE0UmMWMVBYSbnraLodqWicYHBzKmJohrMjW7K9tN6A/0?wx_fmt=jpeg"></div>
	      <div class="swiper-slide"><img src="https://mmbiz.qpic.cn/mmbiz/6U0PibXibmoiauJOSco9iak7wibLIcnQmWZChY86pcW0rtHhtm3Tt3QSV7qeVzTS6XFtT2IUCw06icu9z7JsA02icfziag/0?wx_fmt=jpeg"></div>
	      <div class="swiper-slide"><img src="https://mmbiz.qpic.cn/mmbiz/6U0PibXibmoiauJOSco9iak7wibLIcnQmWZChSyrSrWn9YhVEcQDnxt70rqlklSFyOJoic5K5u5F0EoG0Y8miczLQGichw/0?wx_fmt=png"></div>
	      <div class="swiper-slide"><img src="https://mmbiz.qpic.cn/mmbiz/6U0PibXibmoiaveicrNaDtAkpmMia4WkHQZ5ojF4rcBoZDj6PVVAaTric5RRHgbK9XCP3NVNrTw2MKRnibScnXBhBtylQ/0?wx_fmt=jpeg"></div>
	      <div class="swiper-slide"><img src="https://mmbiz.qpic.cn/mmbiz/6U0PibXibmoiavlz0RdYdVwyxSr9ibsu8xKFEfiblIEhicDMhwdcIJhfscED0mh4sYJPswSR8hrn1c0JR1PMJwnL97gw/0?wx_fmt=jpeg"></div>        
	    </div>
	    <!-- Add Pagination -->
	    <div class="swiper-pagination"></div>
	    <!-- Add Arrows -->
	    <div class="swiper-button-next"></div>
	    <div class="swiper-button-prev"></div>
	</div>



	<!-- 栅格功能 设置中间三个功能方框 -->


		<div class="content-padded grid-demo" >
	      <div class="row">
		      <div class="col-33" style="height: 5rem; background-color: cyan;border-radius: 5px;background-image: url('http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg')"><p class="center-col33-text">公司介绍(可以换个背景)</p></div>
		      <div class="col-33" style="height: 5rem; background-color: orange;border-radius: 5px ;background-image: url('http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg')"><p class="center-col33-text">岗位详情</p></div>
		      <div class="col-33" style="height: 5rem; background-color: pink; border-radius: 5px;background-image: url('http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg')"><p class="center-col33-text">我要报名</p></div>
	   	 </div>       
	  	</div>
	
	<!-- 多媒体列表 -->
	   <div class="list-block media-list">
	    <ul>
	      <li>
	        <a href="#" class="item-link item-content">
	          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
	          <div class="item-inner">
	            <div class="item-title-row">
	              <div class="item-title">题目</div>
	              <div class="item-after">阅读：268</div>
	            </div>
	            <div class="item-subtitle">不忘初心</div>
	            <div class="item-text">我爱我的祖国...</div>
	          </div>
	        </a>
	      </li>
	    </ul>
	  </div>

	  <div class="list-block media-list">
	    <ul>
	      <li>
	        <a href="#" class="item-link item-content">
	          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
	          <div class="item-inner">
	            <div class="item-title-row">
	              <div class="item-title">题目1</div>
	              <div class="item-after">阅读：268</div>
	            </div>
	            <div class="item-subtitle">不忘初心</div>
	            <div class="item-text">我爱我的祖国...</div>
	          </div>
	        </a>
	      </li>
	    </ul>
	  </div>
	  <div class="list-block media-list">
	    <ul>
	      <li>
	        <a href="#" class="item-link item-content">
	          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
	          <div class="item-inner">
	            <div class="item-title-row">
	              <div class="item-title">题目2</div>
	              <div class="item-after">阅读：268</div>
	            </div>
	            <div class="item-subtitle">不忘初心</div>
	            <div class="item-text">我爱我的祖国...</div>
	          </div>
	        </a>
	      </li>
	    </ul>
	  </div>

	  <!-- 普通卡片 -->
	<div class="card" style="box-shadow: 0 0.05rem 0.1rem rgba(0,0,0,0);">
	    <div class="card-header">卡头</div>
	    <div class="card-content">
	      <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
	    </div>
	    <div class="card-footer">卡脚</div>
	  </div>

	<!-- 用栅格设置按钮 -->
	  <div class="content-block">
	    <div class="row">
	      <div class="col-33"><a href="#" class="button button-big button-fill button-danger">按钮1</a></div>
	      <div class="col-33"><a href="#" class="button button-big button-fill button-success">按钮2</a></div>
	      <div class="col-33"><a href="#" class="button button-big button-fill button-success">按钮3</a></div>
	    </div>
	  </div>
</div> 
<!-- 上面就是那个设置窗口大小的div的结束标签 -->

<!-- 底部tab栏 -->
<nav class="bar bar-tab">
  <a class="tab-item external active" href="#">
    <span class="icon icon-home"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-me"></span>
    <span class="tab-label">文案</span>
    <span class="badge">2</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-star"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-cart"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-app"></span>
    <span class="tab-label">文案</span>
  </a>
</nav>


<!-- Swiper JS -->
  <script src="./dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      loop:true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
 <!--  swiper使用参数：
1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
11、onSlideChangeEnd：回调函数，滑动结束时执行 -->
</body>


</html>

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐