精华内容
下载资源
问答
  • Vant Weapp是基于有赞Zanui组件库进行的品牌升级,对于仍在使用Zanui的用户,建议逐步使用Vant Weapp替换替代的组件。 Zanui后续会进入维护状态,仓库地址为: : Vant在mpvue的使用方法可参照 使用方法 运行小程序...
  • zanui-weapp-master

    2018-07-03 13:09:53
    zanui-weapp-master zanui代码 zanui-weapp-master zanui代码
  • ZanUI-WeApp 现已升级为 Vant Weapp,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 本仓库不再维护,请移步至 Vant Weapp 仓库...
  • zanui的使用

    千次阅读 2018-08-16 11:45:13
    把dist目录放在项目的根目录下,并把zanui实例中的componets放在根目录下 3、 在app.wxss中引入index.wxss样式 4、 .wxml 去实例中找样式,复制适当的进行改变 <doc-page title="CAPSULE"...

    1、下载后的项目根目录:
    这里写图片描述

    2、
    把dist目录放在项目的根目录下,并把zanui实例中的componets放在根目录下
    这里写图片描述

    3、
    在app.wxss中引入index.wxss样式
    这里写图片描述

    4、
    .wxml
    去实例中找样式,复制适当的进行改变

    <doc-page title="CAPSULE" without-padding>
    
      <zan-panel without-border>
        <zan-card card-class="test-card" thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg" price="999.99" title="红烧牛肉【虚拟商品】【有库存】【有sku】" num="2" desc="3000克 50%" status="已发货">
        </zan-card>
      </zan-panel>
    
    </doc-page>

    在.json中

    {
      "navigationBarTitleText": "Card 卡片",
      "usingComponents": {
        "zan-card": "../../dist/card/index",
        "zan-panel": "../../dist/panel/index",
        "doc-page": "../../components/doc-page/index"
      }
    }

    样式:
    这里写图片描述

    展开全文
  • mpvue-weui + zanui 这是基于ZanUI + WeUI用mpvue重新编写的一套框架。集合了我在工作中常用的功能! 构建设置 # install 依赖包 npm install # serve with hot reload at localhost:8080(本地预览的的命令) npm ...
  • zanUI组件的使用

    千次阅读 2018-07-25 10:08:29
    zanUI-WeApp的GitHub地址:https://github.com/youzan/zanui-weapp 把dist文件克隆到小程序项目中并新建toast的测试文件,如图所示: 第一步:在json文件中引入组件(差点忘了,给前面浏览的朋友带来困扰了,...

    zanUI-WeApp的GitHub地址:https://github.com/youzan/zanui-weapp

    把dist文件克隆到小程序项目中并新建toast的测试文件,如图所示:

    第一步:在json文件中引入组件(差点忘了,给前面浏览的朋友带来困扰了,今天我就来补充上)

    {
      "usingComponents":{
        "zan-toast":"/dist/toast/index"
      }
    }

    第二步:编写wxml文件,代码如下:

    <view class="box1" bindtap="showToast">toast 测试</view>
    <zan-toast id="zan-toast-test"></zan-toast>

    第三步:编写wxss文件,内容如下:

    /* pages/toast/toast.wxss */
    .box1{
        width: 60%;
        height: 100rpx;
        border: 1rpx solid #0bb20c;
        border-radius: 20rpx;
        line-height: 100rpx;
        text-align: center;
        margin: 80% auto 0 auto;
    }

    第四步:编写js文件,代码如下:

    // pages/toast/toast.js
    const Toast = require('../../dist/toast/toast');
    Page({
        showToast: function(){
            Toast({
                selector: '#zan-toast-test',
                message: 'toast内容'
            });
      }
    
    })

    效果,如图所示:

    有用就给个赞呗!

    腾讯云服务器安全可靠高性能,多种配置供您选择
    https://cloud.tencent.com/redirect.php?redirect=1001&cps_key=8ee0f9c89dfe0958071ea9b77e110670&from=console

     

    展开全文
  • ZanUI-WeApp 是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感知。 包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel...
  • zanui是一套视觉UI包,与weui类似但又不等于weui,约等于weui+weui.js。没有weui成熟、全面。但在微商城这一细分领域,比weui更全面。两者使用了不同的css前缀,可以并用于项目中。   ZanUI-WeApp是有赞推出的,...
  • ZanUI-WeApp 现已升级为 ,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 本仓库不再维护,请移步至 Vant Weapp 仓库. Vant ...
  • 主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • WePy--使用zanUI组件

    2018-08-23 16:43:00
     我的做法是将 源码下了下来, 源码中将zanUI组件 用Wepy的文件类型 写了出来 , 然后在项目中需要用到的那个,再添加进来,加以应用;  步骤截图  1: 在src下创建文件夹, 存放zanUI的样式文件...

      因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo (感谢);

      我的做法是将 源码下了下来, 源码中将zanUI组件 用Wepy的文件类型 写了出来 , 然后在项目中需要用到的那个,再添加进来,加以应用;

      步骤截图 

        1: 在src下创建文件夹, 存放zanUI的样式文件,  helper.scss 与 common.scss 基础样式, 接着看自己用到什么,就引入什么,   比如要用 icon图标, 就加入icon.scss样式.

            

        2: 入口处 app.wpy引入zanUI样式文件,  注意 引入时结尾是 .wxss ;  

            

         在helper样式文件中 引入其余的zanUI样式

          

         使用icon图标 (使用按钮样式也是一样的过程)

          

     

        3: 使用zanUI组件中的布局; 比如使用 zan-tab,  在src的components文件下 创建单独文件夹, 存放tabBar布局;

            效果图 zan-tab

          在页面中使用时 import导入 ,

          

          WePy使用组件的方法参考官方文档吧 https://tencent.github.io/wepy/document.html#/?id=%e6%99%ae%e9%80%9a%e7%bb%84%e4%bb%b6%e5%bc%95%e7%94%a8

           

        新手小白, 刚踏上前端路没多久, 文章写的不对的地方 多多指教,  

     

     

      

      

     

    转载于:https://www.cnblogs.com/yk95/p/9524727.html

    展开全文
  • [iwebchat]是有赞移动 Web UI 规范 ZanUI 的wepy小程序现实版本
  • 小程序框架 WePy中 -- 使用 zanUI组件

    千次阅读 2018-08-28 16:04:20
    我的做法是将 源码下了下来, 源码中将zanUI组件 用Wepy的文件类型 写了出来 , 然后在项目中需要用到的那个,再添加进来,加以应用; 步骤截图   1: 在src下创建文件夹, 存放zanUI的样式文件, helper...

    因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo(感谢);

    我的做法是将 源码下了下来, 源码中将zanUI组件 用Wepy的文件类型 写了出来 , 然后在项目中需要用到的那个,再添加进来,加以应用;

    步骤截图 

      1: 在src下创建文件夹, 存放zanUI的样式文件,  helper.scss 与 common.scss 基础样式, 接着看自己用到什么,就引入什么,   比如要用 icon图标, 就加入icon.scss样式.

     

     

     

     

     

     

     

     

     

     

    2: 入口处 app.wpy引入zanUI样式文件,  注意 引入时结尾是 .wxss ;  helper是基础样式

     

     

     

     

       在helper样式文件中 引入其余的zanUI样式

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

      使用zanUI中的  icon图标 (使用按钮样式也是一样的过程)

     

     

     

    3: 使用zanUI组件中的布局; 比如使用 zan-tab,  在src的components文件下 创建单独文件夹, 存放tabBar布局;

     

     

     

       

      将zan-tab组件通过import导入进页面,  声明之后,使用组件 zanTab

     

     

     

     

     

     

     

     

     

     

      效果图

     

     对于Wepy中使用 组件, 具体参考官方文档 https://tencent.github.io/wepy/document.html#/?id=%e6%99%ae%e9%80%9a%e7%bb%84%e4%bb%b6%e5%bc%95%e7%94%a8

    Wepy框架 目前也是边学习边开发, 加油!

    展开全文
  • 小程序-UI-zanUI 慎用(纯属吐糟)

    千次阅读 2018-08-10 18:08:51
    hello 大家好,又到了每周的分享一点点时间,这次给大家带来的是小程序的一个ui组件库的使用心得,他的名字叫zanUI,熟悉的朋友都知道腾讯爸爸也有WEUI,但是为了逼格高一点,网上见找了zanUI组件库的使用情况调查,...
  • 微信小程序前端UI-zanUI的使用总结

    千次阅读 2019-03-11 13:47:43
    ZanUI-WeApp是一个颜值高、好用、易扩展的微信小程序UI库,ZanUI-WeApp结合了微信的视觉规范,为用户提供更加统一的使用感受。 包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、...
  • ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、...
  • 微信小程序-引入zanui-weapp

    千次阅读 2018-07-06 21:33:13
    要引入zanui-weapp必须要安装以下软件:Node.js,Git,Bower 1:Node.Js安装先下载Node.js,网站https://nodejs.org/en/,左侧为稳定版,右侧为最新版,推荐稳定版Node.js安装,运行下载后的.msi文件,一路下一步就...
  • 【干货#001】小程序使用有赞ZanUI

    千次阅读 2017-11-14 11:01:25
    ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,这套UI还有PC桌面版(React)和移动端版,都经过了有赞的业务实践,特别适合开发商城类程序。 现已包含 badge、btn、card、cell、dialog、icon、label...
  • mpvue-zanui/src/components/zan/toptips' 我的环境是基于:https://github.com/spencer1994/mpvue-cli </p> 还是变异不过,好多报错!</p><p>该提问来源于开源项目:armyja/mpvue-...
  • 小程序zanui安装

    2020-02-27 13:44:53
    https://www.jianshu.com/p/8ebeff8a69b2 里面解释很详细 今天在用bower安装依赖的时候,出现了Bower : ENOGIT git is not installed or not in the PATH ,这个错误提示很明显。就是git没有设置在环境变量中! ...
  • ZanUI-WeApp -- 一个颜值高、好用、易扩展的微信小程序 UI 库:https://cnodejs.org/topic/589d625a5c8036f7019e7a4a 微信小程序之官方UI框架we-ui 使用教程:...
  • 问题:Component template should contain exactly one root element. If you are using v-if on multiple elemen 原因:使用模板只能在子页面拥有一个父对象,因此不能在第一级同时出现多个div ...
  • ZanUI已升级为 Vant Weapp guthub地址  https://github.com/youzan/zanui-weapp 示例代码及组件库的预览 https://youzan.github.io/vant-weapp/#/intro 1 通过 npm 安装,官网比较推荐的,小程序也支持npm...
  • 1. 在已有的小程序根目录下或新建的小程序项目中执行 npm init 这一步蛮重要的! 2. 在小程序工程的根目录下执行 npm i vant-weapp -S --production ... 4. 构建完成后多出一个目录“miniprogram_npm”,这个就是小...
  • 前端UI框架与async-validator介绍 VantUI是一款有赞出品的基于Vue的前端手机端开发框架 ElementUI和MintUI是两款饿了么公司出品的基于Vue的UI框架, ElementUI适用于电脑端, MintUI适用于手机端 ...

空空如也

空空如也

1 2 3 4 5 6
收藏数 105
精华内容 42
关键字:

zanui