移动端页面一些小tips

最新推荐文章于 2024-03-17 18:29:23 发布

Andrew_SJ

最新推荐文章于 2024-03-17 18:29:23 发布

阅读量194

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Andrew_SJ/article/details/119385393

版权

前端专栏收录该内容

97 篇文章 3 订阅

订阅专栏

一：点击div跳转新页面.

不要用<router-link :to="..."></router-link>包裹div，而是给div绑定点击事件，再用$route.push()方法做路由跳转。
在这里插入图片描述
例子：

<div class="flex-grow w-40 h-36 ml-4 pl-5 pt-6 text-xl text-white" style="background-color: #2e7d32" @click="$router.push({name:'Furniture'})">
	<p class="font-semibold">家具</p>
	<div class="mt-8">
		<!-- 箭头 -->
		<img src="@/assets/img/home-arrow.png" alt="" class="w-10 h-10">
	</div>
</div>

在这里插入图片描述

二、列表元素自适应屏幕宽度展示

用div包裹列表，给它设置flex和flex-wrap(自动换行)，内部小div设置宽高，用padding做内部的元素定位(注意此时盒模型为IE盒模型，元素padding和border值都算在元素的宽高内)，图片直接使用img标签（不需要在外面包裹div）设置宽高。
如果要每行固定显示两个元素，用style="width: calc(50% - 1rem);"来设置内部每个小div的宽度为一半少一点，注意这时候要看清楚每个div的margin，margin会撑开盒子导致一行放不下两个。
如图：
在这里插入图片描述

<body>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    <div class="flex flex-wrap">
        <div class="flex-grow w-40 h-36 ml-4 mt-4 pl-5 pt-6 bg-black">
            <p class="text-red-700">家具</p>
            <img src="./img/arrow.png" alt="" class="w-10 h-10 mt-8">
        </div>
        <div class="flex-grow w-40 h-36 ml-4 mt-4 mr-4 pl-5 pt-6 bg-blue-300">
            <p>家具</p>
            <img src="./img/arrow.png" alt="" class="w-10 h-10 mt-8"> 
        </div>
        <div class="flex-grow w-40 h-36 ml-4 mt-4 pl-5 pt-6 bg-black">
            <p class="text-red-700">家具</p>
            <img src="./img/arrow.png" alt="" class="w-10 h-10 mt-8">
        </div>
        <div class="flex-grow w-40 h-36 ml-4 mr-4 mt-4 pl-5 pt-6 bg-blue-300">
            <p>家具</p>
            <img src="./img/arrow.png" alt="" class="w-10 h-10 mt-8"> 
        </div>
    </div>
</body>

三、可以任意拖动的组件

一般做页面上的联系我们按钮，可以随意拖动，并且会自动停靠在屏幕左右。
在这里插入图片描述
使用移动端的touchstart, touchmove和touchend来完成相应功能。
更便携的有可使用的组件：sc-suspension。使用npm或yarn安装：

npm i sc-suspension

https://www.npmjs.com/package/sc-suspension

Andrew_SJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端页面一些小tips

一：点击div跳转新页面.不要用<router-link :to="..."></router-link>包裹div，而是给div绑定点击事件，再用$route.push()方法做路由跳转。例子：<div class="flex-grow w-40 h-36 ml-4 pl-5 pt-6 text-xl text-white" style="background-color: #2e7d32" @click="$router.push({name:'Furniture
复制链接

扫一扫