结合ColorUI组件开发微信小程序

这篇具有很好参考价值的文章主要介绍了结合ColorUI组件开发微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.自定义组件生命周期函数:
Component({
  data: {


  },


  attached() {
    console.log("自定义组件生命周期函数 attached--先执行");
    this.getPos();
  },


  ready() {
    console.log("ready生命周期函数---在attached之后执行")
  },


  methods: {
    getPos() {
      var that = this;
      console.log("ssss")
      wx.getLocation({
        type: "wgs84",
        isHighAccuracy: true,
        success: function (res) {
          console.log('纬度' + res.latitude);
          console.log('经度' + res.longitude);
          that.setData({
            latitude: res.latitude,
            longitude: res.longitude,
          })
        }
      })
    }
  }
})
2.使用ColorUI定义的列表样式:
<view class="cu-list menu">
      <view class="cu-item">
        <view class="content">
          <text class="cuIcon-locationfill text-grey"></text>
          <text class="text-black">地址</text>
          <text class="text-grey text-xs detailPos">详细地址</text>
        </view>
      </view>
 </view>
cuicon-location,微信小程序,notepad++,小程序
3.使用ColorUI定义的图标样式:
<text class="cuIcon-locationfill text-grey"></text>
cuicon-location,微信小程序,notepad++,小程序
4.可上下滚动的列表:
(1).wxml:
  <view class="posList">

    <scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
      <view class="cu-list menu">
        <view class="cu-item" wx:for="{{itemsPos}}" wx:for-item="item" wx:key="index">
          <view class="content">
            <text class="cuIcon-locationfill text-grey"></text>
            <text class="text-black">{{item.pos}}</text>
            <text class="text-grey text-xs detailPos">{{item.detailPos}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
(2).js文件:
  
scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },


  upper(e) {
    // console.log(e)
  },


  lower(e) {
    // console.log(e)
  },


  scroll(e) {
    // console.log(e)
  },
  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },


  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  },
(3).wsxx文件:
.posList {
  position: fixed;
  left: 0%;
  top: 16%;
  width: 100%;
  height: 90%;
  background-color: rgb(215, 253, 0);
}


.scroll-view_H {
  white-space: nowrap;
}


.scroll-view-item {
  height: 100%;
}


.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 100%;
}

文章来源地址https://www.toymoban.com/news/detail-834965.html

到了这里,关于结合ColorUI组件开发微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小白开发微信小程序10--表单组件之checkbox-group/radio-group/label

    微信团队为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的,开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签,只不过标签名字不一样。官方把小程序的组件分为了

    2024年02月04日
    浏览(45)
  • uni-app开发微信小程序使用vant组件tab栏遇到的坑van-tabs

    背景: 使用uni-app开发微信小程序项目,使用的是Vant Weapp实现Tab标签页。 要实现跳转过来,显示默认的当前tab。 在app.json或index.json中引入组件 通过active设定当前激活标签对应的索引值,默认情况下启用第一个标签。 data中的属性 页面接受参数,默认显示对应的tab 问题 到此

    2024年02月10日
    浏览(53)
  • uniapp - 微信小程序接入腾讯视频播放器功能插件,uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程(详细示例源码,一键复制开箱即用)

    在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能!

    2024年02月12日
    浏览(68)
  • 微信小程序 - 接入腾讯地图 SDK 及详细使用教程,结合小程序 mpa 地图组件展示腾讯地图(基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化)

    网上的教程都太乱了,代码根本没办法拿到自己的项目中去。 本文实现了 微信小程序中接入使用腾讯地图插件详细教程,并提供了 基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化等等操作, 你可以直接复制示例代码,稍微改改就能

    2024年02月09日
    浏览(121)
  • 开发微信小程序-安装(一)

    先注册 https://mp.weixin.qq.com/wxopen/waregister?action=step1 下载小程序 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101214 参考: https://developers.weixin.qq.com/miniprogram/dev/#安装开发工具 https://blog.csdn.net/zhangjing1019/article/details/79442828 mainsite-restapi.ele.me fuss10.elemecdn.com www.ele.me 下

    2024年04月25日
    浏览(33)
  • webstorm开发微信小程序

    添加wxml、wxss文件支持: 打开设置 选择编辑器选项中的文件类型 在HTML文件中添加wxml 确认添加wxml文件模式 找到级联样式表 添加wxss 两个插件助于微信小程序的开发

    2024年02月15日
    浏览(44)
  • 基于taro开发微信小程序

    taro基于nodeJS 安装参考安装及使用 | Taro 文档 我这边是采用react来进行编写 使用 Taro 的  build  命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。 Taro 编译分为  dev  和  build  模式 dev 模式(增加 --watch 参数)  将会监听文件修改 build 模式(去掉

    2024年02月09日
    浏览(34)
  • uniapp 开发微信小程序 头部适配

    在 UniApp 中,在微信小程序开发中,头部适配可以通过修改 pages.json 中的 navigationStyle 配置项来实现,具体操作步骤如下: 进入 pages.json 文件 在 UniApp 项目的根目录中找到 pages.json 文件,打开该文件。 修改 navigationStyle 配置项 在 pages.json 文件中,可以为每一个页面单独设置导

    2024年02月14日
    浏览(41)
  • uniapp开发微信小程序订阅消息

    微信发送订阅消息接口文档 1.1、获取模板id及模板字段名称 注意点: 消息字段的类型是有校验的,充电度数是number类型,则传入的string中不能使用0.00度。则会报错。 2.1、编写消息模板配置文件 2.2、编写订阅消息请求对象 2.3、编写充电开始订阅消息模板对象 2.2.1、DataEntry

    2024年02月16日
    浏览(55)
  • 【Python】Python开发微信小程序

    Python作为一门简单易学、功能强大的编程语言,具备广泛的应用领域。近年来,越来越多的开发者选择使用Python来开发微信小程序,以满足用户对于更加高质量、高性能应用的需求。 Python为什么适合开发微信小程序? 首先,Python语言具备良好的可读性和易用性,使得开发者

    2024年02月03日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包