使用基于ThinkPHP3.2.3的ThinkAdmin创建手机电脑通用的表白墙（八）移动端index

最新推荐文章于 2024-01-04 12:05:44 发布

pangPython

最新推荐文章于 2024-01-04 12:05:44 发布

阅读量1.7k

点赞数

分类专栏： PHP 文章标签： thinkphp

本文链接：https://blog.csdn.net/u012995856/article/details/50866194

版权

PHP 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

移动端index界面与PC端大同小异，只是添加了两个按钮

1.View

Mobile/View/Index/index.html

<include file="Public:header"/>

   
     <div class="container js_container">
        <h1 class="page_title">表白墙</h1>
            <p class="page_desc">为"有贼心,没贼胆"的你量身设计</p>
    </div>

<volist name="wall" id="love">

    <svg width="1500" height="50" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;">

    <text font-family="microsoft yahei" font-size="{$love.fontsize}" y="40" x="-28.4475" fill="{$love.color}" style="box-sizing: border-box;">

        {$love.user_name}:{$love.title}

        <animate attributename="x" from="800" to="-400" begin="{$love.begin}" dur="{$love.dur}" repeatcount="indefinite" style="box-sizing: border-box;"></animate>

    </text>
</svg>
</volist>

<div class="bd spacing">
	<div class="button_sp_area">
		<a href="javascript:;" id="button" class="weui_btn weui_btn_plain_primary">表白</a>
	</div>
</div>
<br>
<div class="bd spacing">
	<div class="button_sp_area">
		<a href="javascript:;" id="towall" class="weui_btn weui_btn_plain_primary">看墙</a>
	</div>
</div>

<p class="page_desc"><br><br><br><br><br><br>Powered By 滨州学院信息工程系.</p>




<include file="Public:footer"/>

此处包含的header与PC端的header略有不同，为了自动适配移动设备要另外添加一行代码(已经加红)

Mobile/View/Public/header.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{$title}</title>
	<span style="color:#FF0000;"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"></span>
		<link rel="stylesheet" href="__STATIC__/css/style.css">
	<script type="text/javascript" src="__STATIC__/js/init.js"></script>
	<link rel="stylesheet" href="__STATIC__/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC__/css/example.css"/>
     <script src="__STATIC__/js/zepto.min.js"></script>
    <script src="__STATIC__/js/example.js"></script>
</head>
<body ontouchstart>

JS跳转代码

Mobile/View/Public/static/example.js

原本是weui带的一个测试js,腾讯用的是Zepto.js

看不懂，就重写了！_！

$(function () {
    $('#button').click(function(){
        self.location="Mobile/saylove";
    });
    $('#towall').click(function(){
        self.location="Mobile/wall";
    });
});

2.控制器Controller

Mobile/Controller/IndexController.class.php

代码同home的弹幕

<?php
namespace Mobile\Controller;
use Think\Controller;
class IndexController extends BaseController {
	
	/*
	*
	*手机及微信端
	*	显示弹幕 弹出菜单
	*	后台审核功能
	*	有可能的话加上浏览次数
	*
	*/
    public function index(){
   	$SayLove = M('Saylove');
    	//显示已经通过审核的表白
		$wall = $SayLove->limit(10)->order('rand()')->where('type=1')->select();
		foreach ($wall as &$love) {
			$love['color'] = $this->randomColor();
			$love['fontsize'] = rand(10,50);
			$love['begin'] = strval(rand(0,10)).'s';
			$love['dur'] = strval(rand(9,15)).'s';
		}

		$this->assign('wall',$wall);
    	$this->display(); 
    }
public function randomColor() {

    $str = '#';

    for($i = 0 ; $i < 6 ; $i++) {

        $randNum = rand(0 , 15);

        switch ($randNum) {
            case 10: $randNum = 'A'; break;
            case 11: $randNum = 'B'; break;
            case 12: $randNum = 'C'; break;
            case 13: $randNum = 'D'; break;
            case 14: $randNum = 'E'; break;
            case 15: $randNum = 'F'; break;
        }
        $str .= $randNum;
    }

    return $str;

}


}

3.无Model

效果图：

pangPython

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用基于ThinkPHP3.2.3的ThinkAdmin创建手机电脑通用的表白墙（八）移动端index

移动端index界面与PC端大同小异，只是添加了两个按钮1.ViewMobile/View/Index/index.html 表白墙为"有贼心,没贼胆"的你量身设计 {$love.user_name}:{$love.title}
复制链接

扫一扫