MUI框架-06-静态页制作(图片轮播)

轮播组件

  • 之前也介绍过如何查阅官方文档:http://dev.dcloud.net.cn/mui/ui/#slide
  • 这里需要一个轮播组件,拷贝这段代码就可以了
  • 【注意】:除了固定栏之外,其它内容都要包裹在.mui-content 中
  • 然后我们放上两张图片:

  • 预览截图:
  • 这里就是如果你觉得预览的时候感觉他是 web 浏览器,心理不踏实,总害怕真机运行的时候,界面差异很大,那么请看这篇:MUI框架-07-HBuilder+夜神安卓模拟器 配置
  • 然后我们就可以使用 模拟器来真机运行我们的 app

自定义样式

手机端快速调试

  • 苹果/安卓都可以用,仅限同一局域网内
  • 电脑端 HBuilder web 浏览器有一个地址:
  • 我们可以看一下:

    http://127.0.0.1:8020/new02/index.html

  • 这里的 ip 是127.0.0.1,也就是相当于 localhost 本机的意思
  • 我们打它换成 电脑的 ip v4 地址,就可以在局域网内同时访问了
  • 怎么查看 ip v4 地址?
  • 打开 cmd 输入 ipconfig
  • 【注意】这里可能有好几个 ipv4 地址;
    • 一般的用 wifi 连外网 就找无线局域网适配器的
    • 如果是以太网,可能会有一个 PPP 适配器,选这个
    • 大不了都试一试嘛,
    • 例如我的就是这样的,直接把链接发给手机就可以

      http://10.160.42.153:8020/new/index.html

  • 更新代码后,刷新一下就可以,超级方便,截图:

更多文章链接:MUI 框架


  • 本笔记不允许任何个人和组织转载

MUI框架-06-静态页制作(图片轮播)的更多相关文章

  1. axure 动态面板制作图片轮播 (01图片轮播)

    利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定. 双击动态面板,然后双击s ...

  2. CSS快速制作图片轮播的焦点

    来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...

  3. 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  4. CSS高速制作图片轮播的焦点

    来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...

  5. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  6. 图片轮播,信手拈来(jquery)

    制作图片轮播,可以说是js或者jquery学习者应该掌握的技巧.但惭愧的是本菜之前一直一知半解,这回抽了半天多总结了下分享给大家.虽然标题比较吹牛,但目的是希望大家看了之后制作图片轮播会非常迅速. 首 ...

  7. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  8. H5如何做手机app(移动Web App)?图片轮播?ionic、MUI

    移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...

  9. Android中使用开源框架android-image-indicator实现图片轮播部署

    之前的博文中有介绍关于图片轮播的实现方式,分别为(含超链接): 1.<Android中使用ViewFlipper实现屏幕切换> 2.<Android中使用ViewPager实现屏幕页 ...

随机推荐

  1. cool kickass

    I can stay like this alllllllllll daaaaaaaaayyyyyy.

  2. 搭建django环境

    一.安装django(两种方式) 1.pip install django 2.python setup.py install(下载gjango包:https://www.djangoproject. ...

  3. 写在学习Oracle之前

    好久没有更新我的博客了,主要是因为年前换了工作.新工作比较忙,很少时间来博客园了. 作为Android开发人员,我为什么要学习Oracle数据库呢?我是非计算机专业出身,大学没有学习过任何关于数据库和 ...

  4. ToolkitScriptManager vs. ScriptManager 关于“只能向页面中添加 ScriptManager 的一个实例”讨论

    在使用ASP.NET设计AJAX功能网页时,需要首先声明ToolkitScriptManager或者ScriptManager控件,这些全局的脚本核心控制,然后才能使用众多的AJAX控件.如果没有创建 ...

  5. 完美解决linux系统sublime不能输入中文

    1.下载git项目:sublime-text-imfix,主要是要用到里面的两个文件   subl和libsublime-imfix.so git项目路径:https://github.com/lyf ...

  6. 手机端全局样式表整理(mobile)

    @charset "utf-8";/*  * filename:          global.css * description:       全局样式(包含样式重置,公共常用 ...

  7. sessionKey/tokenKey

    移动端维持登录状态的机制 1. sessionKey/tokenKey哪里来? 1. 登录成功之后,后台返回. 2. sessionKey/tokenKey生成有什么规则? 1. 后台返回的,按照一定 ...

  8. R语言统计字符串的字符数ncahr函数

    函数计算字符数量,包括在一个字符串的空格的个数. 语法 nchar()函数的基本语法是: nchar(x) 以下是所使用的参数的说明: x - 向量输入. 示例 result <- nchar( ...

  9. jmeter(4)——简单测试流程

    今天通过一个简单的例子梳理一下用jmeter进行测试的流程 1.确定被测网站:gogomall.com 2.制定测试指标:响应时间和错误率 3.设计测试场景 4.具体测试步骤 1>创建一个测试计 ...

  10. 百度开源e-chart初探

    前言: 近年来,在数据服务的公司中,数据可视化越来越重要.随着而来的,国内外正在如火如荼的开发各种在线js视图展示框架.而百度的e-chart算是实用性较高且体验最好的!今天闲来无事,便来玩玩~ ec ...