小程序开发常用的css样式及js方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了小程序开发常用的css样式及js方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3334字，纯文字阅读大概需要5分钟。

内容图文

轮播图

<!-- 轮播图 -->
<view class="showImg">
  <swiper class="swiper" indicator-dots="true"  circular  interval="2000" duration="1000" 
  indicator-color="rgba(0,0,0,0.5)" indicator-active-color="#ffffff" >
    <block wx:for="{{backgroundImages}}" wx:for-item="item" wx:for-inedex="index" wx:key="index">
        <swiper-item>
          <view class="box" >
            <image src="{{item}}" class="slideImage"
              bindtap='previewImg' data-id='{{index}}' data-src='{{item}}'></image>
            </view>
        </swiper-item>
    </block>
  </swiper>
</view>

indicator-color="rgba(0,0,0,0.5)" 轮播图知识点背景颜色
indicator-active-color="#ffffff" 选中颜色

 .box{
//给轮播图加阴影效果 
  box-shadow:0px 10px 8px -12px rgb(69, 82, 69); 
  /* background-color: rgba(0, 0, 0, 0); */
  width: 95%;
  height: 285rpx;
  border-radius: 15rpx;
  margin-left: 18rpx;

}

 .positionText{
  font-weight: 700;
  font-size: 32rpx;
  width: 95rpx;
  height: 50rpx;
   /* 文字根据盒子宽度显示，不换行，超出用省略号代替 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  
  margin-left: 34rpx;
  text-align: center;
}`

常用的flex布局重点 https://www.jianshu.com/p/4290522e1560

小程序常用的方法

  // 图片放大
    previewImg: function (event) {
      let that = this;
      let currentUrl = event.currentTarget.dataset.src;
      console.log(event.currentTarget.dataset.src);
      wx.previewImage({
      current:currentUrl,   //当前图片地址
      urls: that.data.backgroundImages,  //所有要预览的图片的地址集合 数组形式 本地图片不好用
    })
    },

    //返回上一页
    backAction: function(){
      var pages = getCurrentPages(); //当前页面
      var beforePage = pages[pages.length - 2]; //前一页
      wx.navigateBack({
        success: function () {
          beforePage.onLoad(); // 执行前一个页面的onLoad方法
        }
      });
    },
  ??//监听屏幕滚动?判断上下滚动
  ??onPageScroll:?function(ev)?{
  ????var?scrollTop?=?ev.scrollTop;
      var that = this;
      var opacity = that.data.opacity;
      console.log(scrollTop)
  ????if?(scrollTop?>?180)?{
        that.setData({
  ????????isShowToolBar:?true,
  // ????????returnBtn:?false
  ??????})
  ??????if?(scrollTop?>?180?&&?scrollTop?<?200)?{
          that.setData({
  ??????????opacity:?0.4,
  ????????})
  ??????}?else?if?(scrollTop?>?200?&&?scrollTop?<?220)?{
          that.setData({
  ??????????opacity:?0.6,
  ????????})
  ??????}?else?if?(scrollTop?>?240)?{
          that.setData({
  ??????????opacity:?1,
  ????????})
  ??????}
  ????}?else?{
  ??????this.setData({
  ????????isShowToolBar:?false,
  // ????????returnBtn:?true
  ??????})
  ????}
  ??},

  // 分享转发功能
  onShareAppMessage (e) {
    return {
      title: this.data.rentalMode+"?"+this.data.room,
      path:'/pages/index/index?url=${url}'
    }
    },
  

  // 文字展开和隐藏
  showAll: function (e) {
    this.setData({
      isFold: !this.data.isFold
    })
    var that = this;
    if(that.data.isFold==true){
      this.setData({
        isFold: true,
        show:'展开全部'
      })
    }else{
      this.setData({
        isFold: false,
        show:'收起'
      })
    }
  },



  // 收藏功能
  rentBoxAction: function(){
    this.setData({
      collect:!this.data.collect
    })
    var that = this;
    if(that.data.collect==true){
      this.setData({
        collect: true,
        preservation:'收藏'
      })
    }else{
      this.setData({
        collect: false,
        preservation:'已收藏'
      })
    }

  },

 
// 查看地址
  houseAddressAction: function(){

    wx.openLocation({
      latitude:this.data.lat,
      longitude:this.data.lon,
      name:this.data.name,
      address:this.data.address,
      scale: 18
    })

     //打开当前地址
    // var that = this;
    // wx.getLocation({
    //   type: 'gcj02', //返回可以用于wx.openLocation的经纬度
    //   success (res) {
    //     const latitude = res.latitude
    //     const longitude = res.longitude
    //     const name = res.name
    //     const address = res.address
    //     that.setData({
    //       name: "111",
    //       address: "22222"
    //     })
       
    //   }
    //  })
  },

内容总结

以上是互联网集市为您收集整理的小程序开发常用的css样式及js方法全部内容，希望文章能够帮你解决小程序开发常用的css样式及js方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端