免费使用可视化uniapp 自动生成代码项目
1.重点优化了flex布局，flex布局目前支持文本内容、图片、头像图标、按钮、标签
2.可以拖拽到相应的flex容器中、插入的收获可以选择插入位置，右侧工具栏可以重新排序
3.可以精准删除flex容器的元素。
4.flex容器新增垂直排列方式，和交叉轴上对齐方式
5.flex容器的每个元素可以调节元素的样式
6.新增flex容器中的元素自适应宽度
hbuilderX开发工具可以把 uniapp 生成H5 网页、小程序、安卓、苹果
注意：修改设计好要保存到vue文件里
谷歌浏览器打开项目地址：http://119.91.145.229:8011/admin/bigdata
免费生成代码，自动布局，更改组件属性值
该项目后续慢慢更新，
代码演示示例：
<template>
<!-- 页面全局配置 -->
<view class="pageconfig">
<!--vuetop-->
<!--搜索组件0的布局样式-->
<view class=" commoncss0 ">
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input :adjust-position="false" type="text" placeholder="请搜索商品、视频、文章" confirm-type="search"></input>
</view>
<view class="action">
<text>深圳</text>
<text class="cuIcon-triangledownfill"></text>
</view>
</view>
</view>
<!--图片轮播1的布局样式-->
<view class=" commoncss1 ">
<swiper class="screen-swiper square-dot" style="min-height: 200rpx;" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
<swiper-item @click="gourl1(item)" v-for="(item,index) in label1List" :key="index">
<image :src="item.image" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<!--宫格组件2的布局样式-->
<view class=" label2 commoncss2 cu-list grid col-4 no-border" style="width: unset;">
<view class="cu-item" @click="gourl2(item)" v-for="(item,index) in label2List" :key="index" style="padding:2rpx">
<view>
<image v-show="item.imgtype !=2" :src="item.pic" class="" style="width: 70rpx;height:70rpx;line-height:0rpx"></image>
<view v-show="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>
<!--FLEX布局3的布局样式-->
<view class=" commoncss3 " style="">
<view class="flex flex-wrap justify-center " style="flex-direction: row;align-content: center;align-items: center;height:76rpx;width:100vw;">
<!--头像图标0的flex布局样式-->
<view class="commoncss30 flex flex-wrap justify-start " style="position:relative; flex-direction: row;">
<view v-for="(item,index) in flex3label0List">
<view v-show="item.imgtype ==1" class="cu-avatar margin-xs " :style="{backgroundImage:'url('+item.pic+')'}"></view>
<view v-show="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 46rpx;"></view>
</view>
</view>
<!--文本内容1的flex布局样式-->
<view class=" commoncss31 ">
<text class="margin-xs text-black text-lg">更多好玩的？</text>
</view>
<!--头像图标2的flex布局样式-->
<view class="commoncss32 flex flex-wrap justify-start " style="position:relative; flex-direction: row;">
<view v-for="(item,index) in flex3label2List">
<view v-show="item.imgtype ==1" class="cu-avatar margin-xs " :style="{backgroundImage:'url('+item.pic+')'}"></view>
<view v-show="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 46rpx;"></view>
</view>
</view>
</view>
</view>
<!--通知栏4的布局样式-->
<view class=" commoncss4 ">
<uni-notice-bar show-icon scrollable text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</view>
<!--图文菜单5的布局样式-->
<view class=" label5 commoncss5 ">
<view class="cu-list menu-avatar menu flex justify-start flex-wrap " style="display: flex">
<view class="cu-item " @click="gourl5(item)" v-for="(item,index) in label5List" :key="index" style="background-color:unset;justify-content: end; width:50%;height:140rpx;">
<view v-show="item.imgtype !=2" class="cu-avatar round lg" :style="{backgroundImage:'url('+item.pic+')'}"></view>
<view v-show="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 50rpx; font-size: 26px;font-size: 60rpx; margin-top: 10rpx;margin-bottom: 8rpx; position: absolute; left: 30rpx; "></view>
<view class="content" style="width:auto;left:140rpx;">
<view class="text-orange">
<view class="text-cut">{{item.name}}</view>
</view>
<view class="text-olive text-sm flex">
<view class="text-cut ">{{item.desc}}
</view>
</view>
</view>
</view>
</view>
</view>
<!--图片组件6的布局样式-->
<view class=" commoncss6 ">
<view class="flex flex-wrap justify-center " style="flex-direction: row;">
<view @click="gourl6(item)" v-for="(item,index) in label6List" class=" col-1 ">
<image mode="widthFix" class="margin-xs radius" :src="item.pic"></image>
</view>
</view>
</view>
<!--秒杀模板7的布局样式-->
<view class=" label7 commoncss7 animation-scale-up ">
<view class="seckill-section m-t padding-bottom-sm">
<view class="s-header flex justify-between align-center " style="height: 80rpx;">
<view class="flex align-center justify-start margin-left-sm">
<image class="s-img " style="width: 40rpx;" src="http://pro.crmeb/static/images/spike-icon-002.gif" mode="widthFix"></image>
<text class="title text-xl text-bold margin-lr-xs ">限时秒杀</text>
<text class="hour time margin-lr-xs bg-red light">{{h}}</text>:
<text class="minute time margin-lr-xs bg-red light">{{m}}</text>:
<text class="second time margin-lr-xs bg-red light">{{s}}</text>
</view>
<view class="flex align-center justify-start text-black">
<text class=" text-black text-right">更多</text>
<text class="cuIcon-right text-right" style="font-size: 34rpx;"></text>
</view>
</view>
<scroll-view class="floor-list" scroll-x>
<view class="scoll-wrapper flex justify-start margin-lr-sm">
<view v-for="(item,index) in label7List" :key="index" class="floor-item margin-right-xs" style="width: 220rpx;position: relative;" @click="gourl7(item)">
<image class="radius" :src="item.pic" style="width: 220rpx;height: 220rpx;"></image>
<view class="cu-tag margin-xs line-red zhekou">{{item.zhekou}}折起</view>
<text style="220rpx: 200rpx;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;" class="title margin-top-sm text-cut">{{item.title}}</text>
<view class="margin-top-xs flex align-center text-red ">
<view class="cu-tag bg-red mytag">抢</view>
<text class="text-bold text-lg">￥{{item.price}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!--商品列表8的布局样式-->
<view class=" label8 commoncss8 ">
<view class="flex justify-start margin-lr-xs padding-left-xs bg-white">
<view class="flex justify-start flex-direction margin-right-sm padding-tb-sm" v-for="(item,index) in label8List2" :key="index">
<text class="text-xl" :style="{'color':index ==0?'rgba(249,84,41,1)':''}">{{item.name}}</text>
<text class=" margin-top-xs text-center round" :style="{'background':index ==0?'rgba(249,84,41,1)':'','color':index ==0?' #fff':'#aaa'}">{{item.desc}}</text>
</view>
</view>
<view class="product_list flex justify-between flex-wrap">
<view class="item margin-xs" style="width: 47%;position: relative; background-color: #fff;border-radius: 20rpx; overflow: hidden;" v-for="(item,index) in label8List" :key="index">
<view class="img-wrap">
<image :src="item.pic" style="height: 340rpx;" mode="aspectFill"></image>
</view>
<view class="cu-tag bg-red label">新品</view>
<view class="content padding-xs">
<view class="">
<view class="text-cut-2">
<text>{{ item.title }}</text>
</view>
</view>
<view class="oldprice margin-tb-xs flex justify-start">
<text style="color: #aaa;font-size: 26rpx;text-decoration: line-through;">{{ item.oldprice}}</text>
</view>
<view class="flex align-center justify-between">
<view class="text-red text-bold text-lg">
<text class="text-price">{{ item.price }}</text>
</view>
<view class="text-sm text-gray">
<text class="margin-right">销量：{{ item.sales}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!--底部按钮9的布局样式-->
<view class=" commoncss9 " style="position: fixed;bottom: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
<view class="cu-bar tabbar ">
<view class="action" @click="gourl9(item)" v-for="(item,index) in label9List">
<view class="cuIcon-cu-image">
<image v-show="item.imgtype !=2" :src="item.pic" class="" style="width: 50rpx;height:50rpx;"></image>
<view v-show="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]" style="font-size: 60rpx;margin-top: 0rpx;"></view>
</view>
<view class="text-green">{{item.name}}</view>
</view>
</view>
</view>
<!--vuetag-->
<view style="height: 98rpx;"></view>
</view>
</template>
<script>
/** author:Mr.yang **/
/** qq:987095529 **/
/** wx:wx987095529 **/
import {
mapState
} from 'vuex'
export default {
data() {
return {
noMore: false,
liveCountTimes: null,
h: "00",
m: "00",
s: "00",
/**single**/
label0List: [],
label1List: [{
"lable": "",
"title": "",
"image": "https:\/\/shitangsystdh\/\/uploads\/attach\/2022\/03\/20220309\/e475104e2ffe2d77a966494c6a069976.png"
}, {
"lable": "",
"title": "",
"image": "https:\/\/shitangsystdh\/\/uploads\/attach\/2022\/03\/20220309\/fb8023fd8b88ebcf0c634579615c16f5.png"
}],
label2List: [{
"name": "环球美食",
"imgtype": 1,
"iconcolor": "black",
"iconname": "home",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/fd2f58bb7251c6e5df08e8d05a23463b.png",
"url": "\/pages\/users\/user_invoice_list\/index"
}, {
"name": "个护美妆",
"imgtype": 1,
"iconcolor": "black",
"iconname": "home",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/879d742839d0047baafbb465f9b3ad98.png",
"url": "\/pages\/users\/user_integral\/index"
}, {
"name": "营养保健",
"imgtype": 1,
"iconcolor": "black",
"iconname": "home",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/28c860417000b58346fbbb935c6243c1.png",
"url": "\/pages\/customer_list\/chat"
}, {
"name": "母婴用品",
"imgtype": 1,
"iconcolor": "black",
"iconname": "home",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/a0e089eae12fefc254284f6bad3b8a03.png",
"url": "\/pages\/users\/user_money\/index"
}],
flex3label0List: [{
"pic": "https:\/\/ossweb-img.qq\/images\/lol\/web201310\/skin\/big10006.jpg",
"imgtype": 2,
"url": "",
"iconname": "titles",
"iconcolor": "green"
}],
flex3label2List: [{
"pic": "https:\/\/ossweb-img.qq\/images\/lol\/web201310\/skin\/big10006.jpg",
"imgtype": 2,
"url": "",
"iconname": "right",
"iconcolor": "gray"
}],
label4List: [{
"name": "一键复制代码"
}, {
"name": "可视化uniapp"
}, {
"name": "自动拖拽布局"
}, {
"name": "一键生成代码"
}],
label5List: [{
"name": "热销商品",
"url": "",
"pic": "https:\/\/ossweb-img.qq\/images\/lol\/web201310\/skin\/big10001.jpg",
"desc": "分享好友",
"imgtype": 1
}, {
"name": "当季新品",
"url": "",
"pic": "https:\/\/ossweb-img.qq\/images\/lol\/web201310\/skin\/big10001.jpg",
"desc": "快来抢购",
"imgtype": 1
}],
label6List: [{
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220617\/d07301acec9a07222152abab8b00b7de.jpg",
"imgtype": 1,
"url": "",
"iconname": "home",
"iconcolor": "black",
"image": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220617\/d07301acec9a07222152abab8b00b7de.jpg"
}],
label7List: [{
"pic4": "https:\/\/timgsa.baidu\/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
"pic": "http:\/\/pic.rmb.bdstatic\/819a044daa66718c2c40a48c1ba971e6.jpeg",
"url": "",
"title": "古黛妃 短袖t恤女夏装2019新款韩版宽松",
"price": 179,
"zhekou": "1.3",
"isnew": 1,
"sales": 61
}, {
"pic3": "https:\/\/ss0.bdstatic\/70cFuHSh_Q1YnxGkpoWK1HF6hhy\/it\/u=4031878334,2682695508&fm=11&gp=0.jpg",
"url": "",
"pic": "http:\/\/img.zcool\/community\/017a4e58b4eab6a801219c77084373.jpg",
"title": "潘歌针织连衣裙",
"price": 179,
"zhekou": "1.3",
"isnew": 1,
"sales": 16
}, {
"pic4": "https:\/\/timgsa.baidu\/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
"pic": "http:\/\/pic.rmb.bdstatic\/819a044daa66718c2c40a48c1ba971e6.jpeg",
"url": "",
"title": "古黛妃 短袖t恤女夏装2019新款韩版宽松",
"price": 179,
"zhekou": "1.3",
"isnew": 1,
"sales": 61
}, {
"pic4": "https:\/\/timgsa.baidu\/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
"pic": "http:\/\/pic.rmb.bdstatic\/819a044daa66718c2c40a48c1ba971e6.jpeg",
"url": "",
"title": "古黛妃 短袖t恤女夏装2019新款韩版宽松",
"price": 179,
"zhekou": "1.3",
"isnew": 1,
"sales": 61
}],
label8List: [{
"pic4": "https:\/\/timgsa.baidu\/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg",
"pic": "http:\/\/pic.rmb.bdstatic\/819a044daa66718c2c40a48c1ba971e6.jpeg",
"picpic": "http:\/\/img001.hc360\/y5\/M00\/1B\/45\/wKhQUVYFE0uEZ7zVAAAAAMj3H1w418.jpg",
"title": "古黛妃 短袖t恤女夏装2019新款韩版宽松",
"price": 179,
"oldprice": 189,
"isnew": 1,
"sales": 61
}, {
"pic3": "https:\/\/ss0.bdstatic\/70cFuHSh_Q1YnxGkpoWK1HF6hhy\/it\/u=4031878334,2682695508&fm=11&gp=0.jpg",
"picpic": "https:\/\/timgsa.baidu\/timg?image&quality=80&size=b9999_10000&sec=1554013048&di=a3dc9fd1406dd7bad7fbb97b5489ec04&imgtype=jpg&er=1&src=http%3A%2F%2Fimg009.hc360%2Fhb%2FnKo44ac2656F831c684507E3Da0E3a26841.jpg",
"pic": "http:\/\/img.zcool\/community\/017a4e58b4eab6a801219c77084373.jpg",
"title": "潘歌针织连衣裙",
"price": 179,
"oldprice": 189,
"isnew": 1,
"sales": 16
}],
label8List2: [{
"name": "首发新品",
"desc": "最新出炉",
"choose": 1
}, {
"name": "当季热销",
"desc": "抢先尝鲜",
"choose": 0
}],
label9List: [{
"name": "首页",
"imgtype": 2,
"iconcolor": "orange",
"iconname": "homefill",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/d5d01475c210e46c357cf3ffaea47535.png",
"url": "",
"image": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/d5d01475c210e46c357cf3ffaea47535.png"
}, {
"name": "分类",
"imgtype": 2,
"iconcolor": "blue",
"iconname": "list",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/28c860417000b58346fbbb935c6243c1.png",
"url": ""
}, {
"name": "购物车",
"imgtype": 2,
"iconcolor": "yellow",
"iconname": "cartfill",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/879d742839d0047baafbb465f9b3ad98.png",
"url": ""
}, {
"name": "我的",
"imgtype": 2,
"iconcolor": "olive",
"iconname": "my",
"pic": "https:\/\/shitangsystdh\/\/uploads\/store\/comment\/20220426\/d5d01475c210e46c357cf3ffaea47535.png",
"url": ""
}],
/**vuejs**/
incomeList: []
};
},
onLoad() {
this.getCount(); /**onload**/
},
methods: {
/**
* $vuetag = "";
* $vuecss = "";
* $vuejs = "";
*
*/
gourl1(item) {
uni.navigateTo({
url: item.url,
});
},
gourl2(item) {
uni.navigateTo({
url: item.url,
});
},
gourl5(item) {
uni.navigateTo({
url: item.url,
});
},
gourl6(item) {
uni.navigateTo({
url: item.url,
});
},
gourl7(item) {
uni.navigateTo({
url: item.url,
});
},
getCount() {
let date = new Date();
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ("0" + MM) : MM;
let d = date.getDate();
d = d < 10 ? ("0" + d) : d;
var timestamptimestamp = Date.parse(new Date(y + "-" + MM + "-" + d));
var timestamptimestamp2 = Date.parse(new Date());
timestamptimestamp += 86400000 - 28800000;
//结束时间减去开始时间
let myleft = timestamptimestamp - timestamptimestamp2;
let startTime = Math.round(myleft / 1000)
let _that = this;
if (startTime) { //如果设置了开始时间
this.liveCountTimes = setInterval(() => {
//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
var obj = {}
if (startTime > 0) {
let day = parseInt(startTime / (60 * 60 * 24));
let hou = parseInt(startTime % (60 * 60 * 24) / 3600);
let min = parseInt(startTime % (60 * 60 * 24) % 3600 / 60);
let sec = parseInt(startTime % (60 * 60 * 24) % 3600 % 60);
obj = {
day: day < 10 ? "0" + day : day,
hou: hou < 10 ? "0" + hou : hou,
min: min < 10 ? "0" + min : min,
sec: sec < 10 ? "0" + sec : sec
};
startTime--;
this.h = obj.hou;
this.m = obj.min;
this.s = obj.sec;
}
}, 1000)
}
},
gourl9(item) {
uni.navigateTo({
url: item.url,
});
},
/**method**/
//获取数据
}
}
</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";
*
*/
page {
background-color: #F8F9FB;
}
/**本页全局配置的代码**/
.pageconfig {
width: 100%;
height: 100vh;
overflow: hidden;
overflow-y: scroll;
}
/**pagedomcss**/
/**本页搜索组件0的css代码**/
moncss0 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**本页图片轮播1的css代码**/
moncss1 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**本页宫格组件2的css代码**/
moncss2 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**本页头像图标0的css代码**/
moncss3 moncss30 {}
/**本页文本内容1的css代码**/
moncss3 moncss31 {
flex: 1;
}
/**本页头像图标2的css代码**/
moncss3 moncss32 {}
/**本页FLEX布局3的css代码**/
moncss3 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**本页通知栏4的css代码**/
moncss4 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**本页图文菜单5的css代码**/
moncss5 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**本页图片组件6的css代码**/
moncss6 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**本页秒杀模板7的css代码**/
moncss7 {
font-size: 26rpx;
background-color: #FFFFFF !important;
}
/* 秒杀专区 */
.time {
padding: 5rpx;
border-radius: 2rpx;
}
.mytag {
padding: 5rpx;
height: 34rpx;
}
.zhekou {
position: absolute;
bottom: 100rpx;
z-index: 2342;
left: 50rpx;
font-size: 28rpx;
background: #fff;
}
/**本页商品列表8的css代码**/
moncss8 {
font-size: 26rpx;
background-color: !important;
}
.text-cut-2 {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.label {
position: absolute;
left: 0;
top: 0;
width: 92rpx;
height: 44rpx;
border-radius: 20rpx 0rpx 20rpx 0rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
line-height: 44rpx;
}
/**本页底部按钮9的css代码**/
moncss9 {
font-size: 26rpx;
background-color: #ffffff !important;
}
/**vuecss**/
.grid.col-1 {
width: 100%;
}
.grid.col-2 {
width: 50%;
}
.grid.col-3 {
width: 33.33%;
}
.grid.col-4 {
width: 25%;
}
.grid.col-5 {
width: 20%;
}
</style>拖拽组件可以完成布局
拖拽生成代码 ，可视化设置属性，自动生成uniapp代码
链接地址为：
http://119.91.145.229:8011/admin/bigdata
加入QQ 群,一起讨论
更多推荐
可视化uniapp 自动生成代码项目
发布评论