关于html5:大数据

49次阅读

共计 8038 个字符，预计需要花费 21 分钟才能阅读完成。

<template>

<view style="height: 100vh;background-color: #f9f9f9;">
    <heat style="background-color: red;"></heat>
    <view style="width: 100%;height: 88rpx;background-color: #fff;"></view>
    <loading></loading>
    <view class="dis_f_f_c">
        <view v-for="(item,index) in list" class="ma_r20 dis_f_f_c"  :hover-start-time="1" :hover-stay-time="1" hover-class="box-active" hover-stop-propagation :key='index' @click="c_shuzi(index,item)">
            <view :class="index==list_num?'fs_36_red':''">
                {{item.name}}
            </view>
            <view class="whbox" v-show="index!=list_num"></view>
            <view :class="item.state?'whbox_red':'whbox_lv'"v-show="index==list_num"></view>
        </view>
    </view>
    <view @click="smcode"> 扫码 </view>
    <view @click="returndy"> 返回 </view>
    
    <view @click="yulantup"> 图片预览 </view>
    <view class="dongxian">
        <view class="dobglan">
            <view class="po_rrr">
                <view class="po_a44"></view>
            </view>
        </view>
    </view>
    
    
    
    <view class="dis_f_f_c">
        <uni-tag text="标签"></uni-tag>
        <uni-tag text="124" size="small" type="default" :circle="true"></uni-tag>
        <uni-tag text="标签" @click="bindClick"></uni-tag>

        <uni-badge text="10" type="error" size='small' style="" />
        <view class="ttt">100</view>
    </view>
    <button @click="open"> 关上弹窗 </button>
    <view style="width: 100px;height: 100px;">
    <uni-grid :column="1">
        <uni-grid-item>
            <text class="text"> 文本 17888888888886</text>
        </uni-grid-item>
        </uni-grid-item>
    </uni-grid>
    </view>
    <uni-popup ref="popup" type="share" >
        <view class="bao" @click="closeone">aas</view>
    </uni-popup>
    <!-- <view style="width: 100%;height: 100px;background-color: #007AFF;position: fixed;z-index: 99;left: 0;bottom: 0;">asd</view> -->
    <!-- <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog type="input" message="胜利音讯" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
    </uni-popup> -->
    <!-- 根本用法 -->
    <uni-search-bar @confirm="search" @input="input"></uni-search-bar>

    <!-- 自定义 Placeholder -->
    <uni-search-bar placeholder="自定 placeholder" @confirm="search"></uni-search-bar>

    <!-- 设置圆角 -->
    <uni-search-bar :radius="100" @confirm="search"></uni-search-bar>

    <!-- 个别用法 -->
    <uni-grid :column="3">
        <uni-grid-item>
            <text class="text"> 文本 1 </text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text"> 文本 2 </text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text"> 文本 3 </text>
        </uni-grid-item>
    </uni-grid>

    <!-- 不带边框并矩形显示 -->
    <uni-grid :column="3" :show-border="false" :square="false">
        <uni-grid-item>
            <text class="text"> 文本 </text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text"> 文本 </text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text"> 文本 </text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text"> 文本 </text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text"> 文本 </text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text"> 文本 </text>
        </uni-grid-item>
    </uni-grid>
    <!-- 根本用法 -->
    <uni-notice-bar single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
    <uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 文字滚动 -->
    <uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 显示图标 -->
    <uni-notice-bar showIcon="true" text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 显示敞开按钮 -->
    <uni-notice-bar showClose="true" showIcon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 查看更多 -->
    <uni-notice-bar @getmore="getMore" :showGetMore="true" moreText="查看更多" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 根本用法 -->
    <uni-steps :options="[{title:' 事件一 '}, {title:' 事件二 '}, {title:' 事件三 '}, {title:' 事件四 '}]" :active="1"></uni-steps>

    <!-- 纵向排列 -->
    <uni-steps :options="[{title:' 买家下单 ',desc:'2018-11-11'},{title:' 卖家发货 ',desc:'2018-11-12'},{title:' 买家签收 ',desc:'2018-11-13'},{title:' 交易实现 ',desc:'2018-11-14'}]"
     direction="column" :active="2"></uni-steps>
     
    <uni-load-more status="loading" iconType="circle"></uni-load-more>
    <uni-swipe-action>
        <!-- 根底用法 -->
        <uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
            <view>SwipeAction 根底应用场景 </view>
        </uni-swipe-action-item>
        <!-- 应用插槽（请自行给定插槽内容宽度）-->
        <uni-swipe-action-item>
            <template v-slot:left>
                <view><text> 置顶 </text></view>
            </template>
            <view>
                <text> 应用插槽 </text>
            </view>
            <template v-slot:right>
                <view><text> 删除 </text></view>
            </template>
        </uni-swipe-action-item>
        <!-- 混合用法 -->
        <uni-swipe-action-item :right-options="options">
            <template v-slot:left>
                <view><text> 置顶 </text></view>
            </template>
            <view><text> 混合应用 </text></view>
        </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 禁止滑动 -->
    <uni-swipe-action>
        <uni-swipe-action-item :disabled="true" :right-options="options">
            <view>SwipeAction 根底应用场景 </view>
        </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 按组应用 -->
    <uni-swipe-action>
        <uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, 0)">
            <view style="height: 50px;">item1</view>
        </uni-swipe-action-item>
        <!-- <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, 1)">
            <view>item2</view>
        </uni-swipe-action-item>
        <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, 2)">
            <view>item3</view>
        </uni-swipe-action-item> -->
    </uni-swipe-action>
    
</view>

</template>

<script>


import heat from "@/components/heat/index.vue"
import loading from '@/pages/index/loading.vue'
export default {
    components:{
        heat,
        loading
    },
    data() {
        return {
            num: 1,
            options: [{
                text: '勾销',
                style: {backgroundColor: '#007aff'}
            }, {
                text: '确认',
                style: {backgroundColor: '#dd524d'}
            }],
            list: [{
                    state: true,
                    name: '张三'
                },
                {
                    state: false,
                    name: '李四'
                },
                {
                    state: false,
                    name: '王五'
                }
            ],
            list_num: 0,
            imglist:[
                {url:'https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/yunyaoduo/buyer/2049/1608197645198.jpg'},
                {url:'https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/yunyaoduo/buyer/2060/1609140476935.jpg'}
            ]
        }
    },
    onLoad() {uni.startPullDownRefresh();
    },
    // 2. 下拉刷新
onPullDownRefresh() {console.log('refresh');
        setTimeout(function () {uni.stopPullDownRefresh();
            // 这里放刷新数据的办法
        }, 1000);
    },
    methods: {yulantup(){console.log('图片')
             let photoList = this.imglist.map(item => {return item.url;});
                    uni.previewImage({
                        current: 1,     // 以后显示图片的链接 / 索引值
                        urls: photoList,    // 须要预览的图片链接列表，photoList 要求必须是数组
                        loop:true   // 是否可循环预览
                    });
        },
        c_shuzi(index, item) {
            this.list_num = index;
            item.state = !item.state;
            
        },
        open() {this.$refs.popup.open()
        },
        closeone(){this.$refs.popup.close()
        },
        /**
         * 点击勾销按钮触发
         * @param {Object} done
         */
        close(done) {
            // TODO 做一些其余的事件，before-close 为 true 的状况下，手动执行 done 才会敞开对话框
            // ...
            done()},
        returndy(){let pages = getCurrentPages();
            let nowPage = pages[pages.length - 1];
            let prevPage = pages[pages.length - 2]; 
            prevPage.$vm.sh = 100;
            uni.navigateBack({delta:1})
        },
        /**
         * 点击确认按钮触发
         * @param {Object} done
         * @param {Object} value
         */
        confirm(done, value) {
            // 输入框的值
            console.log(value)
            // TODO 做一些其余的事件，手动执行 done 才会敞开对话框
            // ...
            done()},
        onClick(e) {console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
        },
        swipeChange(e, index) {console.log('以后状态：' + open + '，下标：' + index)
        },
        bindClick(e) {console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
        },
        smcode(){
            uni.scanCode({success: function (res) {console.log('条码类型：' + res.scanType);
                    console.log('条码内容：' + res.result);
                }
            })
        }
    }
}

</script>

<style>

.dongxian{
    width: 544rpx;
    height: 20rpx;        
    background: #CCE5FD;
    border-radius: 10rpx;
    padding:2rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dobglan{
    width: 30%;
    height: 16rpx;        
    background: #007FF4;
    border-radius: 7rpx;
    padding-right: 44rpx;
    box-sizing: border-box;
    
}
.po_rrr{
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: red; */
}
.po_a44{
    width: 44rpx;
    height: 44rpx;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: -14rpx;
    left: 100%;
}

.box-active{background-color: #f7f7f7;}
.aa {
    height: 100vh;
    width: 100%;
    background-color: #007AFF;
}

.dis_f_f_c {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.fs_36_ff {
    font-size: 36rpx;
    color: #fff;
}

.fs_36_red {
    font-size: 36rpx;
    color: red;
}

.ba_red {background-color: red;}

.ma_r20 {margin-right: 20rpx;}

.shuzi {
    background-color: red;
    color: #fff;
}

.ttt {
    min-width: 20rpx;
    height: 20rpx;
    background-color: red;
    border-radius: 20rpx;
    font-size: 18rpx;
    line-height: 20rpx;
    text-align: center;
    color: #fff;
    padding: 5rpx;
}

.whbox {
    width: 20rpx;
    height: 20rpx;
    background-color: #333;
}

.whbox_red {
    width: 20rpx;
    height: 20rpx;
    background-color: red;
}

.whbox_lv {
    width: 20rpx;
    height: 20rpx;
    background-color: #4CD964;
}

.bao {
    width: 100%;
    height: 500rpx;
    background-color: #fff;
}

</style>

正文完
html5
发表至： html5
2021-06-01
 0
关于html5:纯CSS免费让网站拥有暗黑模式切换功能
关于html5:H5分享截图方案优化
关于html5:存储-localStorage和sessionStorage的区别
关于html5:eltable封装的组件在tab切换的情况下