结合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日
    浏览(42)
  • uni-app开发微信小程序使用vant组件tab栏遇到的坑van-tabs

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

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

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

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

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

    2024年02月09日
    浏览(111)
  • webstorm开发微信小程序

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

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

    先注册 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日
    浏览(31)
  • 基于taro开发微信小程序

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

    2024年02月09日
    浏览(33)
  • cocos开发微信小程序(入门版)

    第一次尝试用cocos写小游戏, 这里记录下基本的知识点总结和踩的坑 黑马课程 这个课程比较基础,而且用的版本比较老了,如果用最新版本的cocos是不行的, 因为最新的cocos creator只能使用ts, 所以这也是为什么我这里有js(creator v1.5.5)和ts(creator v3.6.0)两个版本的 , 完整代码在github

    2024年02月13日
    浏览(29)
  • 30分钟开发微信小程序并部署

    首先,今天我们会使用到腾讯为我们提供的云平台来协助我们小程序的开发和部署。 环境准备: 微信开发者账号(自己在微信公众号平台注册一个账号):https://mp.weixin.qq.com/,同时注册一个自己的测试账号,然后记住自己的appID 下载微信开发者工具 可以理解为微信官方给我

    2024年02月05日
    浏览(40)
  • uniapp开发微信小程序之登录

    最近开发了一个关于订餐的小程序,记录一下开发过程中运到的问题。 小程序登录实现流程: (1)调用微信登录方法获取code (2)后端接口根据code查询该用户是否手机号授权,已绑定openID (3)若绑定过,则直接跳入页面;若没有,则进入授权页面,进行手机号授权 (4)

    2024年02月15日
    浏览(57)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包