可视化uniapp2.0绑定接口数据

最新推荐文章于 2024-04-10 21:22:32 发布
最新推荐文章于 2024-04-10 21:22:32 发布
阅读量667 收藏 2
点赞数
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38344204/article/details/129832509
版权

链接地址：

https://shitangsys.cntdh.net/admin/bigdata2

第一步，拖拽布局完后，选择一个flex布局容器，点击右侧的接口数据 中的选择按钮

 第二步，展示一个弹窗，请求访问结果，并发送请求测试接口，最后点击立即绑定请求数据

返回数据必填，多级用.(点)隔开，返回类型必选

 第三步，绑定完成后，会展示到接口数据那里， 点击也会回显

 

 

 第四步，绑定完成可以查看代码是否绑定成功

 

<template>

    <!-- 页面全局配置 -->
    <view class="pageconfig" :style="{'padding-top':StatusBar + 'px'}">
        <!--vuetop-->
        <view class="flex70848 padding-xs response  flex flex-wrap justify-start  " style="flex-direction: row;">
            <view v-for="(item,index1986) in data1986List" class="flex1986 padding-xs response  flex flex-wrap justify-between  " style="flex-direction: row;">
                <view class="flex96674   flex flex-wrap justify-start  " style="flex-direction: row;">
                    <view class="touxiang62035  cu-avatar   lg round  " :style="{'backgroundImage':'url('+bgpic62035+')' }" style="background-color: unset;"></view>
                    <view class="flex14578   flex flex-wrap justify-start  " style="flex-direction: row;">
                        <view class="flex6572 padding-xs  flex flex-wrap justify-start  " style="flex-direction: row;">
                            <text class=" text12592   text-xl  text-left">王彬彬</text>
                            <view class="flex97992   flex flex-wrap justify-start  " style="flex-direction: row;align-content: flex-end;align-items: flex-end;">
                                <view class="picture79551   ">
                                    <image class=" radius" style="width:100%;width:44rpx;height:44rpx;min-height:unset;" :src="picsrc79551"></image>
                                </view>
                                <text class=" text15338   text-df text-gray text-left">10013424</text>
                            </view>
                            <text class=" text39141  response    text-left">肉食动物，吃货一枚肉食动物，枚肉食动...</text>
                        </view>
                    </view>
                </view>
                <view class="touxiang53226  cu-avatar   sm   " :style="{'backgroundImage':'url('+bgpic53226+')' }" style="background-color: unset;"></view>
            </view>
        </view>
        <view class="flex70724 padding-xs response  flex flex-wrap justify-start  " style="flex-direction: row;height:160rpx;min-height:unset;">
            <view class="flex94333 padding-xs  flex  justify-start  " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
                <text class=" text53015   text-lg  text-left">8866</text>
                <text class=" text66289   text-sm text-gray text-left">获赞</text>
            </view>
            <view class="flex84919 padding-xs  flex  justify-start  " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
                <text class=" text38010   text-lg  text-left">425</text>
                <text class=" text50166   text-sm text-gray text-left">关注</text>
            </view>
            <view class="flex58674 padding-xs  flex  justify-start  " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
                <text class=" text90486   text-lg  text-left">225</text>
                <view class="tag418   ">
                    <view class="cu-tag     sm round  bg-red">1</view>
                </view>
                <text class=" text52683   text-sm text-gray text-left">粉丝</text>
            </view>
            <view class="flex50577 padding-xs  flex  justify-start  " style="flex-direction: column;align-items: center;height:140rpx;min-height:unset;">
                <text class=" text70178   text-lg  text-left">19</text>
                <view class="tag6390   ">
                    <view class="cu-tag     sm round  bg-green">99+</view>
                </view>
                <text class=" text66621   text-sm text-gray text-left">动态</text>
            </view>
        </view>
        <view class="flex15743 padding-xs response  flex flex-wrap justify-center  " style="flex-direction: row;">
            <view class="flex11648   flex flex-wrap justify-around  " style="flex-direction: row;align-content: center;align-items: center;">
                <view class="flex8444 padding-xs  flex flex-wrap justify-start  " style="flex-direction: row;align-content: center;align-items: center;">
                    <text class=" text64951   text-xxl text-black text-left">秀友圈</text>
                    <text class=" text88649    text-white text-left">分享生活分享感动</text>
                </view>
                <view class="flex84339 padding-xs  flex flex-wrap justify-end  " style="flex-direction: row;align-content: center;align-items: center;">
                    <view class="touxiang20310  cu-avatar   sm   " :style="{'backgroundImage':'url('+bgpic20310+')' }" style="background-color: unset;"></view>
                    <view class=" tubiao71739   cuIcon-right  text-white" style="font-size: 46rpx;"></view>
                </view>
            </view>
        </view>
        <view class="   gongge14156  response ">
            <view class=" cu-list grid col-4 no-border">
                <view class="cu-item" v-for="(item,index) in label14156List" :key="index">
                    <view>
                        <image v-if="item.imgtype !=2" :src="item.pic" class="" mode="heightFix" style="width: auto;height:70rpx;line-height:0rpx"></image>
                        <view v-if="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 70rpx;margin-top: 0rpx;"></view>
                    </view>
                    <text style="font-size: unset;color: unset;margin-top:4rpx;">{{item.name}}</text>
                </view>
            </view>
        </view>

        <view class="flex1060 padding-xs response  flex flex-wrap justify-start  " style="flex-direction: row;">
            <view class="putong70806   ">
                <view class="cu-list menu">
                    <view class="cu-item arrow" style="background-color: unset;">
                        <view class="content">
                            <text class="text-left text-bold   ">推荐更多</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="flex10061 padding-xs response  flex flex-wrap justify-start  " style="flex-direction: row;">
                <view class="flex11263 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang77551  cu-avatar      " :style="{'backgroundImage':'url('+bgpic77551+')' }" style="background-color: unset;"></view>
                    <text class=" text18114     text-left">扫一扫</text>
                </view>
                <view class="flex64091 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang89185  cu-avatar      " :style="{'backgroundImage':'url('+bgpic89185+')' }" style="background-color: unset;"></view>
                    <text class=" text6522     text-left">附近的人</text>
                </view>
                <view class="flex2570 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang57848  cu-avatar      " :style="{'backgroundImage':'url('+bgpic57848+')' }" style="background-color: unset;"></view>
                    <text class=" text97840     text-left">音频会议</text>
                </view>
                <view class="flex61494 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang23723  cu-avatar      " :style="{'backgroundImage':'url('+bgpic23723+')' }" style="background-color: unset;"></view>
                    <text class=" text90994     text-left">视频会议</text>
                </view>
                <view class="flex30385 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang57554  cu-avatar      " :style="{'backgroundImage':'url('+bgpic57554+')' }" style="background-color: unset;"></view>
                    <text class=" text19089     text-left">我的客服</text>
                </view>
                <view class="flex94241 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang38603  cu-avatar      " :style="{'backgroundImage':'url('+bgpic38603+')' }" style="background-color: unset;"></view>
                    <text class=" text81102     text-left">意见反馈</text>
                </view>
                <view class="flex22157 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang85339  cu-avatar      " :style="{'backgroundImage':'url('+bgpic85339+')' }" style="background-color: unset;"></view>
                    <text class=" text53598     text-left">邀请码</text>
                </view>
                <view class="flex88132 padding-xs  flex flex-wrap justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                    <view class="touxiang64397  cu-avatar      " :style="{'backgroundImage':'url('+bgpic64397+')' }" style="background-color: unset;"></view>
                    <text class=" text55429     text-left">设置</text>
                </view>
            </view>
        </view>
        <view class="  dibubtn81352   " style="position: fixed;bottom: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
            <view class="cu-bar tabbar ">
                <view class="action" @click="goclick81352(index,item)" v-for="(item,index) in label81352List">
                    <view class="cuIcon-cu-image">
                        <image v-if="item.imgtype !=2" :src="item.pic" class="" style="width: 50rpx;height:50rpx;"></image>
                        <view v-if="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 60rpx;margin-top: 0rpx;"></view>
                    </view>
                    <view>{{item.name}}</view>
                </view>
            </view>
        </view>

        <view style="height: 98rpx;"></view>

    </view>
</template>


<script>
    /**    author:Mr.yang    **/
    /**    qq:987095529   **/
    /**    wx:wx987095529   **/
    import Vue from 'vue'
    import {
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                StatusBar: 0,
                data1986List: [],
                bgpic62035: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/f4636f89bcb840a5f2ba38332ae64b83.png',
                picsrc79551: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/36e683b5b9b32c063adc35fa7e2b89d5.png',
                bgpic53226: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/1753e27d43e437db426c655339ca570f.png',
                bgpic20310: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/e13ba21bc7a5a5c2c37d82a1aa93d4f2.png',
                bgpic77551: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/62a80863c088bba5d4e906b198d6eaca.png',
                bgpic89185: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/4080e4a9894e63977cfdbadb0f89a108.png',
                bgpic57848: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/ea4f307db6f6b4fd73ad1f3a294fe0fd.png',
                bgpic23723: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/05db5d650502d3faa813d289fdc07968.png',
                bgpic57554: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/351b8ffe5ab8ba1bce75dbbbca6a0698.png',
                bgpic38603: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/1ccb99cf30a2a7ecda9f49b1c1278ae1.png',
                bgpic85339: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/0bfcd296604bc4bc3d7d64c976f50e76.png',
                bgpic64397: 'https://shitangsys.cntdh.net//uploads/store/comment/20230320/0031673361a3de287d89b720a6e667e8.png',


                label14156List: [{
                    "name": "我的钱包",
                    "imgtype": 1,
                    "myname": "",
                    "myurl": "",
                    "evtform": [],
                    "myremark": "",
                    "event": "",
                    "iconcolor": "black",
                    "iconname": "home",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/943793aad624339be4b5fd967c531da9.png",
                    "url": "/pages/users/user_coupon/index",
                    "image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/943793aad624339be4b5fd967c531da9.png"
                }, {
                    "name": "我的订单",
                    "imgtype": 1,
                    "myname": "",
                    "evtform": [],
                    "myurl": "",
                    "myremark": "",
                    "event": "",
                    "iconcolor": "black",
                    "iconname": "home",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/49d2158ef119751717380ca97372587a.png",
                    "url": "/pages/users/user_goods_collection/index",
                    "image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/49d2158ef119751717380ca97372587a.png"
                }, {
                    "name": "赞过的",
                    "imgtype": 1,
                    "iconcolor": "black",
                    "myname": "",
                    "evtform": [],
                    "myurl": "",
                    "myremark": "",
                    "event": "",
                    "iconname": "home",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/d84e530f262a730df8be2e6f2170fdcc.png",
                    "url": "/pages/users/user_address_list/index",
                    "image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/d84e530f262a730df8be2e6f2170fdcc.png"
                }, {
                    "name": "我的收藏",
                    "imgtype": 1,
                    "iconcolor": "black",
                    "evtform": [],
                    "myname": "",
                    "myurl": "",
                    "myremark": "",
                    "event": "",
                    "iconname": "home",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/a4a35ecd5f0a28d0ee2bb9acd536bc13.png",
                    "url": "/pages/users/user_money/index",
                    "image": "https://shitangsys.cntdh.net//uploads/store/comment/20230320/a4a35ecd5f0a28d0ee2bb9acd536bc13.png"
                }],
                /**vuejs**/
                label81352List: [{
                    "name": "首页",
                    "myname": "",
                    "myurl": "",
                    "evtform": [],
                    "myremark": "",
                    "event": "",
                    "imgtype": 2,
                    "iconcolor": "black",
                    "iconname": "home",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/d5d01475c210e46c357cf3ffaea47535.png",
                    "url": "",
                    "image": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/d5d01475c210e46c357cf3ffaea47535.png"
                }, {
                    "name": "分类",
                    "myname": "",
                    "myurl": "",
                    "evtform": [],
                    "myremark": "",
                    "event": "",
                    "imgtype": 2,
                    "iconcolor": "blue",
                    "iconname": "sort",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/28c860417000b58346fbbb935c6243c1.png",
                    "url": ""
                }, {
                    "name": "购物车",
                    "myname": "",
                    "myurl": "",
                    "evtform": [],
                    "myremark": "",
                    "event": "",
                    "imgtype": 2,
                    "iconcolor": "grey",
                    "iconname": "cart",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/879d742839d0047baafbb465f9b3ad98.png",
                    "url": ""
                }, {
                    "name": "我的",
                    "imgtype": 2,
                    "iconcolor": "red",
                    "iconname": "my",
                    "pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/d5d01475c210e46c357cf3ffaea47535.png",
                    "url": ""
                }],
                /**vuejs**/


            };
        },
        onLoad() {
            this.getsysinfo();
            this.goclick1986();


        },
        methods: {


            //获取顶部状态栏的高度
            getsysinfo() {
                let that = this;
                uni.getSystemInfo({
                    success: function(e) {
                        // #ifndef MP
                        that.StatusBar = e.statusBarHeight;
                        if (e.platform == 'android') {
                            that.StatusBar = e.statusBarHeight + 50;
                        } else {
                            that.StatusBar = e.statusBarHeight + 45;
                        };
                        // #endif

                        // #ifdef MP-WEIXIN
                        that.StatusBar = e.statusBarHeight;

                        // #endif

                        // #ifdef H5
                        that.StatusBar = 0;

                        // #endif

                        // #ifdef MP-ALIPAY
                        Vue.prototype.StatusBar = e.statusBarHeight;
                        that.StatusBar = e.statusBarHeight + e.titleBarHeight;
                        // #endif

                    }
                })

            },



            /**
             *          $vuetag = "";
             *          $vuecss = "";
             *          $vuejs = "";
             *
             */

            goclick1986() {

                let params = {};
                let headstr = {};
                console.log(params)
                // return
                let res = this.$api.request("/api/combination/indexbanner_list", "GET", params, headstr).then(res => {
                    if (res) {
                        this.data1986List = res.data

                        console.log(res, "请求的结果")
                    }

                }).catch(err => {
                    console.log("请求的报错的结果")
                    console.log(err)
                })


            },
            /**method**/
            goclick81352(index, item) {},
            //获取数据

        }
    }
</script>

<style lang="less">
    /**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




    /**本页全局配置的代码**/
    .pageconfig {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
    }



    /**pagedomcss**/


    .flex70848 {
        font-size: 26rpx;
        background-color: #ffffff;
        background-image: url(https://shitangsys.cntdh.net//uploads/store/comment/20230320/0b28a2f0cf8037cea01d13c5deaa61f4.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .flex1986 {
        font-size: 26rpx;
        margin-top: 136rpx;
        margin-bottom: 10rpx;
    }

    .flex96674 {
        width: 87%;
        font-size: 26rpx;
    }

    .touxiang62035 {
        font-size: 26rpx;
    }

    .flex14578 {
        width: 75%;
        font-size: 26rpx;
        margin-left: 10rpx;
    }

    .flex6572 {
        width: 98%;
        font-size: 26rpx;
    }

    .text12592 {
        font-weight: bold;
        margin-right: 46rpx;
    }

    .flex97992 {
        width: 56%;
        margin-top: 8rpx;
        margin-bottom: 2rpx;
    }

    .picture79551 {
        width: 100%;
        width: 44rpx;
        height: 44rpx;
        background-color: #ffffff;
    }

    .text15338 {
        font-size: 26rpx;
    }

    .text39141 {
        font-size: 26rpx;
    }

    .touxiang53226 {
        font-size: 26rpx;
    }

    .flex70724 {
        height: 160rpx;
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .flex94333 {
        width: 20%;
        height: 140rpx;
        font-size: 26rpx;
        flex: 1;
        background-color: #ffffff;
    }

    .text53015 {
        font-size: 26rpx;
        font-weight: bold;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .text66289 {
        font-size: 26rpx;
    }

    .flex84919 {
        width: 20%;
        height: 140rpx;
        font-size: 26rpx;
        flex: 1;
        background-color: #ffffff;
    }

    .text38010 {
        font-size: 26rpx;
        font-weight: bold;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .text50166 {
        font-size: 26rpx;
    }

    .flex58674 {
        width: 20%;
        height: 140rpx;
        font-size: 26rpx;
        flex: 1;
        background-color: #ffffff;
        position: relative;
    }

    .text90486 {
        font-size: 26rpx;
        font-weight: bold;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .tag418 {
        position: absolute;
        top: 4rpx;
        right: 12rpx;
    }

    .text52683 {
        font-size: 26rpx;
    }

    .flex50577 {
        width: 20%;
        height: 140rpx;
        font-size: 26rpx;
        flex: 1;
        background-color: #ffffff;
        position: relative;
    }

    .text70178 {
        font-size: 26rpx;
        font-weight: bold;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .tag6390 {
        position: absolute;
        top: 4rpx;
        right: 12rpx;
    }

    .text66621 {
        font-size: 26rpx;
    }

    .flex15743 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .flex11648 {
        width: 96%;
        font-size: 26rpx;
        background-color: #ffffff;
        background-image: url(https://shitangsys.cntdh.net//uploads/store/comment/20230320/0b28a2f0cf8037cea01d13c5deaa61f4.png);
        background-image: linear-gradient(to right, rgb(168, 237, 234) 0%, rgb(254, 214, 227) 100%);
        background-position: center center;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        padding-left: 10rpx;
        padding-right: 10rpx;
        border-top-left-radius: 240rpx;
        border-top-right-radius: 240rpx;
        border-bottom-right-radius: 240rpx;
        border-bottom-left-radius: 240rpx;
    }

    .flex8444 {
        width: 63%;
        font-size: 26rpx;
    }

    .text64951 {
        font-weight: bold;
    }

    .text88649 {
        margin-left: 16rpx;
    }

    .flex84339 {
        width: 33%;
        font-size: 26rpx;
    }

    .touxiang20310 {
        font-size: 26rpx;
    }

    .tubiao71739 {
        font-size: 26rpx;
    }

    .gongge14156 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .flex1060 {
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 30rpx;
        margin-bottom: 10rpx;
    }

    .putong70806 {
        width: 100%;
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .flex10061 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .flex11263 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang77551 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .text18114 {
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .flex64091 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang89185 {
        font-size: 26rpx;
    }

    .text6522 {
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .flex2570 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang57848 {
        font-size: 26rpx;
    }

    .text97840 {
        font-size: 26rpx;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .flex61494 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang23723 {
        font-size: 26rpx;
    }

    .text90994 {
        font-size: 26rpx;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .flex30385 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang57554 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .text19089 {
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .flex94241 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang38603 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .text81102 {
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .flex22157 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang85339 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .text53598 {
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .flex88132 {
        width: 25%;
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .touxiang64397 {
        font-size: 26rpx;
        background-color: #ffffff;
    }

    .text55429 {
        font-size: 26rpx;
        background-color: #ffffff;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .dibubtn81352 {
        width: 100%;
        font-size: 26rpx;
        background-color: #ffffff;
    }
</style>

前端杨哥
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app开发小程序可视化之uchart
槿柊的博客
07-09 2222
前言 一般有数据的地方就有可视化，小程序开发过程中碰到了可视化问题，uniapp中有两种方案，uchars或者echars，本想使用echars，官网一直都打不开，发现uchars也挺好使！ ##老规矩 一图胜千言 0 下载就不用说！上地址： https://ext.dcloud.net.cn/plugin?id=271 1 导入 没有像官方文档写的直接使用HBX导入，主要是先搞清楚哪几个文件在作用。 也可以按官方文档直接如图所示导入。 2 配置 ###使用配置工具修改并完成uchars的配置工作：
可视化uniapp V2.0 版本已上线
weixin_38344204的博客
09-28 3947
可视化uniapp V2.0 版本已上线、拖拽更加丝滑
uniapp 2.0可视化开发工具高级事件使用技巧探索
最新发布
chenchuang0128的博客
04-10 1036
同时，我们也要关注uniapp框架的更新和发展，及时了解和掌握最新的功能和特性，以便更好地应对不断变化的市场需求和技术挑战。通过class动态绑定样式和style动态绑定样式，开发者可以根据变量的值动态改变元素的类名和样式，使得页面的表现更加灵活多变。uniapp作为一款优秀的跨平台应用开发框架，凭借其强大的功能和易用的特性，赢得了广大开发者的青睐。，这使得开发者可以根据自己的需求定义事件的处理逻辑，并传递相应的参数。得到了进一步的升级，特别是高级事件的使用技巧，为开发者提供了更加便捷和高效的开发体验。
从零搭建uniapp app,适合小白,傻瓜化,页面搭积木可视化创建
u013931283的博客
10-27 2156
分享一: 从零搭建uniapp app 分享二: 一个 uniapp uview ui 可视化,完全自由拖拽,一键生成flex代码网站: http://aicode.shagua.wiki/uni/index.html#/ 十大特性 1.可视化,自由拖拽,推导出flex布局,尽可能兼容多端(h5,微信小程序) 2.支持uviewui内置所有图标,也可以使用阿里图标库160万+图标(需填写网络路径) 3.支持在遮罩mask,弹窗Popup,modal 等组件,直接拖拽,绘制 4.对于常用的表单组件,可直接帮你
可视化uniapp 2.0实现可视化微信小程序+可视化h5+可视化uniapp
weixin_38344204的博客
08-22 4944
🎨 1. 可视化拖拽容器组件，包含基础组件和表单组件，自动生成布局，一键生成uniapp、h5和小程序代码，让开发更高效！🔌 10. 点击绑定接口的数据，进入请求页面，输入请求url、方式和参数，运行接口数据并选择绑定返回参数，实时预览效果！🔍 6. 点击查看源码，自动显示修改后的代码变化，同时查看h5、uniapp和微信小程序代码，全方位了解代码结构。📁 7. 可视化创建vue文件，选择目录后即可创建文件，将代码保存在vue文件中，每个文件可作为一个设计页面。设计你的界面，轻松实现可视化布局！
uni-app切片-可视化设计工具(一套代码编译到7个平台iOS、Android、H5、小程序)
cddxwfl1的博客
06-27 4941
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。一套代码编到7个平台，难以置信吗？依次扫描7个二维码，亲自体验最全面的跨平台效果！ uni-app切片是一款根据效果图像画画一样来可视化设计uni-app程序，自动生成导出前端页面的快速开发工具。可以很方便、快速地生成程序的布局,样式...
1.uniapp可视化操作-diygw
MRS的博客
06-06 1287
uniapp可视化-diygw环境搭建
Tableau数据可视化实战.pdf
08-09
Tableau数据可视化实战 在本书中，我们将深入探讨 Tableau 数据可视化的实战应用。Tableau 作为一款非常强大的数据可视化工具，已经被全球数万家企业所采用。通过本书的学习，读者将能够快速掌握 Tableau 的使用，...
Echarts数据可视化通用模板
07-04
Echarts html 相关的 数据可视化通用模板，可借鉴设计
数据可视化课程练习题.docx
06-09
几百道数据可视化课程的习题， 部分试题： 什么是平稳时间序列？ 我的答案： 对于一个时间序列来说，如果它的均值没有系统的变化（无趋势），方差没有系统变化，并且严格消除 了周期性的变化，就称为是平稳的。
KITTI数据集的可视化项目
10-16
vis/lidar_vis.py:提供查看.bin格式点云的可视化 vis/bev_vis.py:提供查看.bin格式点云的bev视图 vis/visualization.py:使用kitti_object_vis项目，提供kitti数据集的9中可视话操作
uni-app使用的演示
10-27
文章中用到的例子都有写在这，需要的朋友可以下载下来，解压后拖到HBuilder X里面运行。该资源里面包含了foreach循环的演示，以及如何实现登录动画、如何进行下拉刷新、如何进行触底加载，还有如何进行跳转与接收数据，以及底部导航栏运用colorui的框架技术。
Python对CSV文件数据进行可视化
12-21
从网上下载数据，并对这些数据进行可视化。 我们将访问并可视化两种常见格式存储的数据：CSV和JSON。分别使用Python中的csv以及json模块对他们进行处理。 然后，我们再根据下载的数据，使用matplotlib创建一个图标。...
在uni-app框架中简单实现数据可视化
小王的技术博客
08-17 3691
图表库的选择 大家都知道前端实现数据可视化可以使用echarts、antV、F2.js、等等图表库都能实现数据的可视化。 但是由于需要实现跨平台、多端运行。我们在这里选择uCharts。肯定你要问为什么要选择这个呢？ uCharts相比F2.js和Echarts的复杂的设置，uCharts几乎可是实现傻瓜式的配置 Echarts在跨端使用更复杂、uCharts只需要简单的`canv...
可视化uniapp2.0如何创建vue文件
weixin_38344204的博客
07-03 463
最后，在uniapp可视化平台中，点击导出项目按钮，选择导出类型为HBuilderX项目。将导出的项目文件在HBuilderX中打开，即可直接在HBuilderX中运行整个项目。在弹出的对话框中，输入页面名称和路由路径，并选择vue文件类型，点击确定。完成页面设计后，点击右上角保存按钮，将当前设计保存到对应的vue文件中。进入页面设计界面，通过拖拽组件、修改属性等操作进行页面设计。在弹出的对话框中，选择vue模板并输入项目名称，点击确定。在项目结构中，选择pages目录，右键新建页面。
uni-app：实现页面效果4（echarts数据可视化）
weixin_46001736的博客
10-08 388
uni-app：实现页面效果4（echarts数据可视化）
可视化uniapp设计功能技术点
weixin_38344204的博客
07-03 1126
使用吸管工具快速给网页布局上色，快捷键让你设计布局事半功倍。1. 简单拖拽，轻松构建：独特的可视化拖拽容器组件，让你无需编写一行代码，即可自动生成布局，同时生成uniapp代码和h5代码，让你的应用在各个平台展现出色的兼容性。4. 一键导出项目，高效快速：一旦完成设计，你可以轻松一键导出项目的全部代码，并直接在HbuilderX中运行，省去繁琐的配置步骤，让你的应用秒速上线。3. 设计随时保存，创意不断涌现：不用担心丢失你的设计，只需保存修改后的内容，保留你的创作灵感，随时随地参与到项目的设计过程中。
UNIAPP + UView2.0入门
liangsw
03-28 929
1、2、打开HBuilder，文件 --> 新建 --> 项目。点击右侧 <使用HBuilder导入插件>，选择要导入的项目；中，引入并使用uView的JS库，注意这两行要放在。（2）在引入uView的全局SCSS主题文件。选择默认模版，点击 <创建> 按钮！（4）配置easycom组件模式。（3）引入uView基础样式。（1）引入uView主JS库。2、访问uView官方网站。点击右上角： <组件>；此配置需要在项目根目录的。点击左侧： <安装>；
【匠心打造】从0打造uniapp 可视化拖拽设计 c_o 第九篇
lhf214111967的专栏
06-05 379
因公司事情比较多，一直未更新， 最近收到100多个私信。问我什么是否开源。这里说明会开源的。 ，此次更新一共三部分。
高德地图Loca 数据可视化 API 2.0 隐藏图层
05-12
高德地图Loca 数据可视化 API 2.0 支持隐藏图层的功能。具体实现方法如下： 1. 创建图层时，可以设置 visible 属性为 false，这样该图层在创建后就不会显示出来。 ``` let layer = new Loca.HexagonLayer({ map: map, visible: false, // 设置为不可见 eventSupport: true, ... // 其他配置 }); ``` 2. 在需要显示该图层时，将该图层的 visible 属性设置为 true。 ``` layer.setVisible(true); // 显示该图层 ``` 3. 在需要隐藏该图层时，将该图层的 visible 属性设置为 false。 ``` layer.setVisible(false); // 隐藏该图层 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值