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

2023-12-13 03:48:37
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%;
}

文章来源:https://blog.csdn.net/woshiyuyanjia/article/details/134885395
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。