标签： javascript

使用 Laravel Translations Loader 在 Javascript 中使用 Laravel 翻译

原文：https://laravel-news.com/laravel-translations-in-javascript

您是否曾经想在前端代码中使用与后端相同的 Laravel 翻译？

Laravel Translations Loader是一个 webpack 加载器，可让您将 Laravel 翻译加载到 javascript 包中。

该包不是执行 HTTP 请求来获取翻译，而是进入资产编译过程的中间，并将您的 PHP 翻译文件（JSON 和 PHP）转换为 JSON 对象，以便您可以随意使用。

它可以使用vue-i18n等软件包开箱即用，或者使用流行的i18next软件包进行一些配置调整。

继续阅读使用 Laravel Translations Loader 在 Javascript 中使用 Laravel 翻译

Bootstrap 笔记

1、移动端手势滑动事件

$(function () {
        // 获取手指在轮播图元素上的一个滑动方向（左右）

        // 获取界面上轮播图容器
        var $carousels = $('.carousel');
        var startX,endX;
        // 在滑动的一定范围内，才切换图片
        var offset = 50;
        // 注册滑动事件
        $carousels.on('touchstart',function (e) {
            // console.log(e);
            // 手指触摸开始时记录一下手指所在的坐标x
            startX = e.originalEvent.touches[0].clientX;

        });
        $carousels.on('touchmove',function (e) {
            // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
            endX = e.originalEvent.touches[0].clientX;
        });
        $carousels.on('touchend',function (e) {
            //console.log(endX);
            //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
            //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
            var distance = Math.abs(startX - endX);
            if (distance > offset){
                //说明有方向的变化
                //根据获得的方向 判断是上一张还是下一张出现
                $(this).carousel(startX >endX ? 'next':'prev');
            }
        })
    });

2、去除 ul li 间的间隔

ul{
    list-style-type: none;
    margin:0px;
    padding:0px;
}