网库网(www.wangkuwang.com)精品网站源码,织梦建站模版,游戏源代码分享平台

模板户源码

当前位置:首页 -> CMS教程 -> dede教程 正文

基于MUI微信客户端图片定时轮播实现

时间:2018-07-08 00:35:23 [整站源码]作者:zhaopulei


晓华老师 宅客在线

 




1

概要



MUI是一个基于js,csshtml5实现 的一种技术,是一种能达到原生体验的高性能开源框架,几乎与app相同效果,能生成apk文件,框架里提供了大量组件,供开发人员使用,例如,折叠面板,操作表,数据角标,图片轮播,图文表格,各种输入框,九宫格,tab 项卡,chart图表,下拉刷新等,此文章实现图片轮播。


2

本次文章在微信中运行效果图



图-1  图片轮播截图1


图-2  图片轮播截图2



3

实现过程



下面就实现切图过程向大家介绍下:首先大家创建在myeclipse中创建web工程并把muijscss导入工程中:


图-3代码架构



1
在slider_picture.jsp页面中,写入js代码


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPEhtml>

<html>


    <head>

        <meta charset="utf-8">

        <title>下方悬浮标题测试</title>

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">


        <!--标准mui.css-->

        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/mui.min.css">

        <!--App自定义的css-->

        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/app.css"/>

    </head>


    <body>

        <header class="mui-bar mui-bar-nav">

             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

             <h1 class="mui-title">下方悬浮标题测试</h1>

        </header>

        <div class="mui-content">

             <ul class="mui-table-view mui-table-view-chevron">

                 <li id="switch" class="mui-table-view-cell">

                     定时轮播图片

                     <div class="mui-switch">

                         <div class="mui-switch-handle"></div>

                     </div>

                 </li>

             </ul>

             <div id="slider" class="mui-slider">

                 <div class="mui-slider-group mui-slider-loop" id="sliderContent">

                     <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->

                     <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>

                 <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>

        </div>

    </body>

    <script src="${pageContext.request.contextPath}/js/mui.min.js"></script>

    <script src="${pageContext.request.contextPath}/js/jquery-1.11.2.min.js"></script>

    <script>

        mui.init({

             swipeBack:true //启用右滑关闭功能

        });

        var slider = mui("#slider");

        document.getElementById("switch").addEventListener(toggle, function(e) {

             if (e.detail.isActive) {

                 slider.slider({

                     interval: 5000

                 });

             } else {

                 slider.slider({

                     interval: 0

                 });

             }

        });

        function showFunction()

        {

          mui.ajax(/mobile/slider/list.xhtml, {               

                type: post, //HTTP请求类型

                timeout:100000000,

                success: function(data) {                

                  var lst=eval((+data+));               

                   for(var i=0;i<lst.length;i=i+2)

                   {  

                      var sliderList="<div class=mui-slider-item mui-slider-item-duplicate><a href=#><img src="+lst[i]+"><p>"+lst[i+1]+"</p></a></div>";             

                     $("#sliderContent").append(sliderList);

                   }             

                },

                error: function(xhr, type, errorThrown) {

                    alert(errorThrown);

                }

            });

        }

        showFunction();

    </script>

</html>



2
控制器主要用于接收客户端的请求,代码如下:


package com.chinasofti.mobile.controller;


import java.util.ArrayList;


import org.json.JSONArray;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;


/**

 * 返回九宫格功能列表

 * @author Administrator

 *

 */

@RequestMapping(value="/slider")

@Controller

public class SliderController

{


    /**

     * 返回列表

     * @returnjson格式数据

     */

    @ResponseBody

    @RequestMapping(value="/list")

    public String pictrueList()

    {

        ArrayList<String> list=new ArrayList<String>();

        list.add("images/a.png");

        list.add("北京风景一角(1)");

        list.add("images/b.jpg");

        list.add("北京风景一角(2)");

        list.add("images/c.png");

        list.add("北京风景一角(3)");

        list.add("images/d.png");

        list.add("北京风景一角(4)");     

        list.add("images/f.png");

        list.add("北京风景一角(6)");

        list.add("images/g.png");

        list.add("北京风景一角(7)");

        list.add("images/e.png");

        list.add("北京风景一角(5)");

        return new JSONArray(list).toString();

    }


}


3
 spring配置文件

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

    xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"

    xsi:schemaLocation="http://www.springframework.org/schema/beans  http://www.springframework.org/schema/beans/spring-beans-3.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd  http://www.springframework.org/schema/tx  http://www.springframework.org/schema/tx/spring-tx-3.1.xsd">

    <!-- 扫描注解 -->

    <context:component-scan base-package="com.chinasofti.mobile.*"></context:component-scan>

    <bean id="sessionFactory"

        class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean">

        <property name="configLocation" value="classpath:hibernate.cfg.xml">

        </property>

    </bean>

    <!--事务管理器 -->

    <bean id="transactionManager"

        class="org.springframework.orm.hibernate3.HibernateTransactionManager">

        <property name="sessionFactory">

            <ref bean="sessionFactory" />

        </property>

    </bean>

    <tx:annotation-driven transaction-manager="transactionManager" />

    <!-- 视图解析器 -->

    <bean id="urlre"

        class="org.springframework.web.servlet.view.InternalResourceViewResolver">

        <property name="prefix">

             <value>/</value>

        </property>

        <property name="suffix">

             <value>.jsp</value>

        </property>

    </bean>

</beans>





4

总结


这次文章介绍了MUI实现图片轮播及通过设置是否开启定时轮播来轮播图片。




    本文标签:AutoTags插件服务端需要您提供购买者的账号和密码才能继续访问  折翼天使  莎莎源码  吾爱源码  其他源码 

    转载请注明来源:PHP手机端发卡多种支付商业版源码

    本文永久链接地址:https://www.suibianlu.com/11942.html

    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
    若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法链接失效或侵犯版权,请给我们来信:admin@suibianlu.com

    栏目导航
    最新文章
    热门文章
    Top