结合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>

3.使用ColorUI定义的图标样式:
<text class="cuIcon-locationfill text-grey"></text>
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%;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构:位图、布隆过滤器以及海量数据面试题

位图、布隆过滤器以及海量数据面试题 1.位图1.1概念1.2实现1.3位图应用 2.布隆过滤器2.1布隆过滤器的提出2.2布隆过滤器的概念2.3布隆过滤器的查找2.4布隆过滤器的实现2.5布隆过滤器的删除2.6布隆过滤器的优点2.7布隆过滤器的缺点 3.海量数据面试题3.1哈希切分3.2位图应用3.3布…

如何成为前1%的程序员

如果你想成为前1%的程序员&#xff0c;你必须遵循1%的程序员做什么&#xff0c;了解其他99%的人不做什么。在现代&#xff0c;我们有各种学习平台&#xff0c;里面充满了与编程相关的视频、图文以及其他资料。 举例来说&#xff0c;我作为编程的初学者&#xff0c;去寻找路线图…

IDEA2023找不到add framework support怎么解决

问题: 我的idea版本是2023.01&#xff0c;新版idea右键项目没有Add Framework Support&#xff0c;help里面也找不到相关的。 从project structue的facets里面添加就行了&#xff0c;都是一样的。 1.依旧是新建一个项目 2.file-->project structure--->facets 左上角加…

数据结构与程序的关系

在计算机科学中,数据结构和算法是两个核心的概念。数据结构是程序的基础,它组织和存储数据的方式直接影响程序的设计、效率、可读性以及程序的错误检测和调试。本文将详细讨论数据结构如何影响程序,以及数据结构与算法的组合如何使程序更高效、可靠。 一、数据结构的选择影…

Android studio如何安装ai辅助工具

引言 在没有翻墙的情况下&#xff0c;即单纯在公司打工&#xff0c;经测试&#xff0c;大部分ai工具都是使用不了的&#xff08;比如各种gpt,codeium,copilot&#xff09;&#xff0c;根本登录不了账号&#xff0c;但有一个国内的codegeex是可以使用的&#xff0c;在这里不对各…

tensorflow中张量tensor

在 TensorFlow 中&#xff0c;主要操作的对象是张量&#xff08;tf.Tensor&#xff09;。张量表示一个多维数组&#xff0c;可以执行各种操作以构建和修改计算图。以下是一些常见的 TensorFlow 张量操作&#xff1a; 1. 创建张量&#xff1a; 使用 tf.constant 创建常量张量。…

Android app性能优化指南

Android应用性能优化指南 提高应用程序的性能以实现更流畅的用户体验和更高的可见度。 性能在任何应用程序的成功中发挥着重要的作用。为用户提供流畅无缝的体验应该是开发人员的重点。 应用程序大小 在用户开始使用我们的应用程序之前&#xff0c;他们需要下载应用程序并将…

DTCC2023大会-DBdoctor-基于eBPF观测数据库-附所有PPT下载链接

DTCC2023大会-DBdoctor-基于eBPF观测数据库-附所有PPT下载链接 8月16日—18日,第14届中国数据库技术大会(DTCC-2023)在北京国际会议中心举行。聚好看在大会上首次发布基于eBPF观测数据库性能的产品DBdoctor&#xff0c;受到了业界广泛的关注。近期几位业内同仁过来要大会的PPT…

2024考研数学二备考历程

GoodNotesGoodNotes apphttps://share.goodnotes.com/s/bhsraJMZ6OJwuYJb3OWnzP

Python点云处理(二十)点云轮廓边界提取——基于邻域三角形距离算法

目录 0 简述1 点云轮廓提取原理2 点云轮廓提取应用3 算法步骤4 代码实现5 结果展示0 简述 点云轮廓提取/边界提取,对于扫描物信息化提取、矢量化等都具有很重要的意义。扫描物体轮廓不仅包含位置和形状信息,而且可作为一种先验形状信息推断其结构以辅助三维模型重建,因此轮…

C/C++之输入输出

文章目录 一.C语言的输入输出1.printfi. 输出整数ii. 浮点数iii.字符 & 字符串 2.scanfi.整数ii.浮点数iii. 字符 & 字符串 3.特殊用法i. * 的应用ii. %n 的应用iii. %[] 的应用 二.C中的输入输出1.couti. 缓冲区&#xff08;buffer&#xff09;ii. cout之格式化输出 2…

Proteus仿真--串口发送数据到2片8×8点阵屏滚动显示

本文介绍2片88点阵屏滚动显示设计&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 仿真运行视频 Proteus仿真--1602LCD显示电话拨号键盘按键实验&#xff08;仿真文件程序&#xff09; 附完整Proteus仿真资料代码资料 链接&#xff1a;https://pan.baidu…

【python】函数的参数(实参,形参,*args和**kwargs)

一、实参和形参 实参&#xff1a; 函数执行的时候给函数传递的具体的值 形参&#xff1a; 在函数声明时编写的变量 函数执行时每个形参都要有值 # a,b为形参 def add(a, b):print(a b) # 3,4为实参 add(3, 4)二、实参 1.位置参数 按位置给形参传递数据 def add(a, b)…

使用C语言操作kafka ---- librdkafka

1 安装librdkafka git clone https://github.com/edenhill/librdkafka.git cd librdkafka git checkout v1.7.0 ./configure make sudo make install sudo ldconfig 在librdkafka的examples目录下会有示例程序。比如consumer的启动需要下列参数 ./consumer <broker> &…

一对一聊天程序

package untitled1.src;import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.*; import java.net.*;public class MyServer extends JFrame{private ServerSocket server; // 服务器套接字pri…

【漏洞复现】华脉智联指挥调度平台/xml_edit/fileread.php文件读取漏洞

Nx01 产品简介 深圳市华脉智联科技有限公司&#xff0c;融合通信系统将公网集群系统、专网宽带集群系统、不同制式、不同频段的短波/超短波对讲、模拟/数字集群系统、办公电话系统、广播系统、集群单兵视频、视频监控系统、视频会议系统等融为一体&#xff0c;集成了专业的有线…

第一课【习题】HarmonyOS应用/元服务上架

元服务发布的国家与地区仅限于“中国大陆” 编译打包的软件包存放在项目目录build > outputs > default下 创建应用时&#xff0c;应用包名需要和app.json5或者config.json文件中哪个字段保持一致&#xff1f; 发布应用时需要创建证书&#xff0c;证书类型选择什么…

web前端实现LED功能、液晶显示时间、数字

MENU 效果演示html部分JavaScript部分css部分 效果演示 html部分 <div id"app"><!-- 页面 --><div class"time-box"><!-- 时 --><div class"house-box"><bit-component :num"houseTem"></bit…

编译器缓存

2023年12月6日&#xff0c;周三晚上 使用编译器缓存有什么用 编译器缓存是一种用于加速编译过程的工具&#xff0c;它可以缓存已编译的对象文件和依赖关系&#xff0c;以便在后续构建中重复使用。使用编译器缓存可以带来以下几个好处&#xff1a; 加快编译速度&#xff1a;编译…

TS型变与对象类型进阶

子类型&#xff1a;给定两个类型A和B&#xff0c;假设B是A的子类型&#xff0c;那么在需要A的地方都可以放心使用B。计作 A <: B &#xff08;A是B的子类型&#xff09;。 超类型正好与子类型相反。A >: B &#xff08;A是B的超类型&#xff09;。 1 TS 类型 可赋值性…