精华内容
下载资源
问答
  • 现象: 给页面底部元素设置margin-bottom 在iOS上失效 解决办法: 给外层元素(page)加padding-bottom

    现象:

    给页面底部元素设置margin-bottom 在iOS上失效

    解决办法:

    给外层元素(page)加padding-bottom

    展开全文
  • @微信小程序------计算器界面练习[TOC] 经过对微信小程序的初步学习,大致可以将微信小程序分为js文件,json文件,wxml文件和wxss文件。 与Android相似,微信小程序将数据,布局以及逻辑分开。 1.js文件用于小...

    @微信小程序------计算器界面练习[TOC]
    经过对微信小程序的初步学习,大致可以将微信小程序分为js文件,json文件,wxml文件和wxss文件。
    与Android相似,微信小程序将数据,布局以及逻辑分开。
    1.js文件用于小程序的数据内容,数据的定义,函数的构建都在js文件中设计。
    2.wxml文件用于小程序的逻辑开发,小程序的组件在wxml文件中定义,wxml文件的代码与html语法相似,其中view组件可以看做div盒子。
    3.wxss文件用于小程序的布局,wxss文件与css语法相似。
    将view组件视为盒子进行布局:
    1.定义一个整个界面的盒子(view)
    2顶部的view用于显示图片(image组件,主要参数为src:"…/…/pages/…")。
    3.定义用于存放输入框的view,输入框设置为禁用状态(disabled)
    4.定义用于存放数字按钮的view,使用margin属性将各个组件之间设置间距(eg:margin-left:16rpx;)
    number.js

    // pages/计算器/number.js
      Page({
      /**
       * 页面的初始数据
       */
      data: 
      {
        title:"个人计算器",
        result:"",
        r: "",
        t:"<-",
        bottom1:"精诚所至",
        bottom2: "金石为开",
      },
      c:function(e)
      {
        var x=this.data.result
        x=x%10
        var y=this.data.result
        y=(y-x)/10
        this.setData({result:y})
      },
      clear:function(e)
      {
        this.setData({result:""})
        this.setData({r: "" })
      },
      s:function(e)
      {
        this.setData({r:this.data.result})
      },
      f7:function()
      {
        var x=7
        this.setData({ result: this.data.result * 1 * 10 + x})
      },
      f8: function (e) 
      {
        var x = 8
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      f9: function (e) 
      {
        var x = 9
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      add: function (e) 
      {
    
      },
      sum: function (e) {
    
      },
      f4: function (e) 
      {
        var x = 4
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      f5: function (e) 
      {
        var x = 5
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      f6: function (e) 
      {
        var x = 6
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      mul: function (e) 
      {
    
      },
      ex: function (e) 
      {
    
      },
      f1: function (e) 
      {
        var x = 1
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      f2: function (e) 
      {
        var x = 2
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      f3: function (e) 
      {
        var x = 3
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      f0: function (e) 
      {
        var x = 0
        this.setData({ result: this.data.result * 1 * 10 + x })
      },
      point: function (e) 
      {
    
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

    number.wxml

      <view class='main'>
       <view class='top'>
        {{title}}
      </view>
      <image style="width: 100%; height: 120px;" mode="scaleToFill" src="../../pages/img/1.png">
      </image>
      <view class='p'>
      <input value='{{result}}' disabled>
      </input>
      </view>
      <view class='q'>
      <input value='{{r}}' disabled>
      </input>
      </view>
      <view class='p1'>
        <button bindtap='c'>{{t}}</button>
        <button bindtap='clear'>C</button>
        <button bindtap='s'>=</button>
      </view>
      <view class='p2'>
        <button bindtap='f7'>7</button>
        <button bindtap='f8'>8</button>
        <button bindtap='f9'>9</button>
        <button bindtap='add'>+</button>
        <button bindtap='sum'>-</button>
      </view>
      <view class='p2'>
        <button bindtap='f4'>4</button>
        <button bindtap='f5'>5</button>
        <button bindtap='f6'>6</button>
        <button bindtap='mul'>*</button>
        <button bindtap='ex'>/</button>
      </view>
      <view class='p2'>
        <button bindtap='f1'>1</button>
        <button bindtap='f2'>2</button>
        <button bindtap='f3'>3</button>
        <button bindtap='f0'>0</button>
        <button bindtap='point'>.</button>
      </view>
      <view class="bottom1">{{bottom1}}</view>
      <view class="bottom2">{{bottom2}}</view>
    </view>
    

    number.wxss

    /* pages/计算器/number.wxss */
    	.main
    	{
    	  background-color: rgba(60, 255, 0, 0.253);
    	  width:100%;
    	  height: 570px;
    	}
    	.top
    	{
    	  text-align: center;
    	  font-size: 23pt;
    	  color: rgba(255, 0, 191, 0.349);
    	  font-family: "隶书";
    	}
    	.p
    	{
    	  background-color: rgb(238, 238, 238);
    	  border-radius: 10px;
    	  width: 80%;
    	  height: 30px;
    	  margin-left: 35px;
    	  font-size: 18pt;
    	}
    	.q
    	{
    	  background-color: rgb(238, 238, 238);
    	  border-radius: 10px;
    	  width: 60%;
    	  height: 30px;
    	  margin-left: 105px;
    	  font-size: 18pt;
    	  margin-top: 10px;
    	}
    	.p1
    	{
    	  display: flex;
    	  flex-direction: row;
    	  margin-top: 20px;
    	  text-align: center;
    	}
    	.p1 button
    	{
    	  width: 30%;
    	}
    	.p2
    	{
    	  display: flex;
    	  flex-direction: row;
    	  margin-top: 20px;
    	  text-align: center;
    	}
    	.p2 button
    	{
    	  width: 18%;
    	}
    	.bottom1
    	{
    	  margin-left: 85px;
    	  font-size: 18pt;
    	  color: red;
    	}
    	.bottom2
    	{
    	  margin-left: 155px;
    	  font-size: 18pt;
    	  color: red;
    	}
    

    运行界面:
    在这里插入图片描述
    [1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
    [2]: https://mermaidjs.github.io/
    [3]: https://mermaidjs.github.io/
    [4]: http://adrai.github.io/flowchart.js/

    展开全文
  • 微信小程序----map路线规划

    万次阅读 热门讨论 2018-02-01 17:09:20
    效果图 ...采用高德地图的 微信小程序SDK获取规划路线的坐标点。 WXML view class=&amp;amp;amp;quot;tui-map&amp;amp;amp;quot;&amp;amp;amp;gt; map id=&amp;amp;amp;q

    效果体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    声明

    bug: 页面脚的步行、骑行、驾车区域在真机测试是会出现不显示问题?
    造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡!
    解决办法:将该文本视图采用cover-view,放在map中。
    感谢: 感谢Lrj_estranged指出问题!

    效果图

    进入页面直接定位到当前位置,输入目的地!

    进入定位选择目的地

    返回首页查看路线规划—选择驾车、步行、骑行

    查看路线规划选择驾车、步行、骑行

    原理

    1. 采用微信小程序的map组件;
    2. 采用高德地图的 微信小程序SDK获取规划路线的坐标点。

    WXML

    <view class="tui-map">
      <map id="map" longitude="{{currentLo}}" latitude="{{currentLa}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}"  include-points="{{includePoints}}" show-location style="width: 100%; height: 100%;">
        <cover-view class="tui-search-bottom {{show ? '' : 'tui-hide'}}">
    	  <cover-view class="page-group">
    	    <cover-view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo">驾车</cover-view>
    	    <cover-view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo">步行</cover-view>
    	    <cover-view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo">骑行</cover-view>
    	  </cover-view>
    	  <cover-view class="tui-warn">
    	    {{distance}}米
    	  </cover-view>
    	  <cover-view class="tui-warn">
    	    {{duration}}分钟
    	  </cover-view>
    	</cover-view>
      </map>
    </view>
    <view class="tui-map-search" bindtap="getAddress">
       <icon size='20' type='search' class='tui-map-search-icon'></icon> 
      <input class="tui-map-input" placeholder="搜索" focus="{{focusStatus}}"></input>
    </view>
    

    JS

    var amapFile = require('../../src/js/amap-wx.js');
    Page({
      data: {
        key: 'c290b7e016c85e8f279b2f80018c6fbf',
        show: false,
        currentLo : null,
        currentLa : null,
        newCurrentLo : null,
        newCurrentLa : null,
        distance : 0,
        duration : 0,
        markers : null,
        scale: 16,
        polyline: null,
        statusType: 'car',
        includePoints:[]
      },
      onLoad(){
        var _this = this;
        wx.getLocation({
          success(res){
            _this.setData({ 
              currentLo: res.longitude, 
              currentLa: res.latitude,
              includePoints: [{
                longitude: res.longitude,
                latitude: res.latitude
              }],
              markers: [{
                id: 0,
                longitude: res.longitude,
                latitude: res.latitude,
                title: res.address,
                iconPath: '../../src/images/navi_s.png',
                width: 32,
                height: 32
              }]
            });
          }
        })
      },
      getAddress(e){
        var _this = this;
        wx.chooseLocation({
          success(res){
            var markers = _this.data.markers;
            markers.push({
              id: 0,
              longitude: res.longitude,
              latitude: res.latitude,
              title: res.address,
              iconPath: '../../src/images/navi_e.png',
              width: 32,
              height: 32
            });
    
            var points = _this.data.includePoints;
            points.push({
              longitude: res.longitude,
              latitude: res.latitude
            });
            _this.setData({
              newCurrentLo: res.longitude,
              newCurrentLa: res.latitude,
              includePoints: points,
              markers: markers,
              show:true
            });
            _this.getPolyline(_this.data.statusType);
          }
        });
      },
      drawPolyline(self,color){
        return {
          origin: this.data.currentLo + ',' + this.data.currentLa,
          destination: this.data.newCurrentLo + ',' + this.data.newCurrentLa,
          success(data) {
            var points = [];
            if (data.paths && data.paths[0] && data.paths[0].steps) {
              var steps = data.paths[0].steps;
              for (var i = 0; i < steps.length; i++) {
                var poLen = steps[i].polyline.split(';');
                for (var j = 0; j < poLen.length; j++) {
                  points.push({
                    longitude: parseFloat(poLen[j].split(',')[0]),
                    latitude: parseFloat(poLen[j].split(',')[1])
                  })
                }
              }
            }
            self.setData({
              distance: data.paths[0].distance,
              duration: parseInt(data.paths[0].duration/60),
              polyline: [{
                points: points,
                color: color,
                width: 6,
                arrowLine: true
              }]
            });
          }
        }
      },
      getPolyline(_type){
        var amap = new amapFile.AMapWX({ key: this.data.key });
        var self = this;
        switch (_type){
          case 'car':
            amap.getDrivingRoute(this.drawPolyline(this,"#0091ff"));
            break;
          case 'walk':
            amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
            break;
          case 'ride':
            amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
            break;
          default:
            return false;
        }
      },
      goTo(e){
        var _type = e.currentTarget.dataset.type;
        this.setData({statusType : _type});
        this.getPolyline(_type);
      }
    })
    

    WXSS

    .tui-map-search{
      width: 100%;
      height: 80rpx;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000000;
      box-sizing: border-box;
      padding: 5rpx 10px;
      background-color: #fff;
      line-height: 70rpx;
    }
    .tui-map-input{
      height: 70rpx;
      line-height: 70rpx;
      font-size: 30rpx;
      margin-left: 25px;
    }
    .tui-map-search-icon{
      position: absolute;
      top: calc(50% - 10px);
      left: 10px;
    }
    .tui-map{
      width: 100%;
      height: calc(100% - 80rpx);
      position: fixed;
      bottom: 0;
      left: 0;
    }
    .tui-map-direction{
      width: 32px;
      height: 32px;
      position: fixed;
      right: 10px;
      bottom: 80px;
      z-index: 100000;
    }
    
    .page-group{
      display: table;
      width: 100%;
      table-layout: fixed;
      background-color: #fff;
    }
    .page-nav-list{
      padding:20rpx 0 ;
      font-size: 30rpx;
      display: table-cell;
      text-align: center;
      width: 100%;
      color: #222;
    }
    .page-nav-list.active{color:blue;}
    .tui-warn{
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
      color: lightseagreen;
      font-size: 30rpx;
    }
    .tui-search-bottom{
      height: 150px;
      background: #fff;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }
    

    注意

    1. 在实例化 AMapWX 对象前,必须引入amap-wx.js,amap-wx.js下载
    2. 驾车、步行、骑行这三个类型返回的数据类似,所以直接采用drawPolyline方法进行数据处理,而公交返回的数据和他们相差太大,所以下一章另行讲解;
    3. wx.chooseLocation() API返回搜索坐标需要时间,如果在还未完成搜索定位前确定,会返回之前的定位位置。

    WXRUI体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    其他

    我的博客,欢迎交流!

    我的CSDN博客,欢迎交流!

    微信小程序专栏

    前端笔记专栏

    微信小程序实现部分高德地图功能的DEMO下载

    微信小程序实现MUI的部分效果的DEMO下载

    微信小程序实现MUI的GIT项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

    展开全文
  • question:微信小程序开发过程中,页面底部元素设置margin-bottom在ios下失效。 answer:可给page设置padding-bottom来解决  

    question:微信小程序开发过程中,页面底部元素设置margin-bottom在ios下失效。

    answer:可给page设置padding-bottom来解决

     

    展开全文
  • 微信小程序---高德地图API

    万次阅读 2018-11-29 10:16:16
    本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示。 微信小程序目前支持百度地图、高德地图、腾讯地图。用法都基本一致,简单说一下他们的区别,高德地图精度应该是最准确的,毕竟本来就是做...
  • 微信小程序-----左滑删除

    千次阅读 2018-03-27 16:31:27
    }, //测试临时数据 tempData:function(){ var list = [ { txtStyle:"", icon:"/images/icon0.png", txt:"向左滑动可以删除" }, { txtStyle:"", icon:"/images/icon6.png", txt:"微信小程序|联盟(wxapp-union.com)...
  • 微信小程序----map组件实现(路线规划) 效果图 实现原理 通过map组件标记起始点和绘制路线图; 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程。 ...
  • 解决办法1 外层元素加1rpx padding .wrapper{ height: auto; padding-bottom:1rpx; } 解决办法2 用padding代替margin
  • 微信小程序--text组件学习

    万次阅读 2016-09-25 10:32:07
    微信小程序--text组件学习 api文档指出 文本节点,支持转义符"\"。 除了文本节点以外的其他节点都无法长按选中 video 视频 demo demo {{text}} add line
  • 微信小程序---wxss常用属性

    千次阅读 多人点赞 2018-09-11 13:48:10
    微信小程序的代码和网页编程非常相似,两者都有JS、JSON文件,同时WXML=&amp;amp;amp;gt;HTML,WXSS=&amp;amp;amp;gt;CSS。 附上两条链接:w3school关于CSS的完整教程,w3school关于HTML的完整教程。 ...
  • 微信小程序--登录+获取用户信息+获取手机号+获取位置信息主题部分小坑 主题部分 1、基础代码 wxml: <view class="userinfo" style="margin-bottom:50rpx"> <view class="userinfo" style="margin-top:45...
  • 微信小程序--添加新属性,动态展开收起查看详情
  • 微信小程序----map组件实现(高德地图API实现wx.chooseLocation(OBJECT)) 声明 bug: 页面搜索返回的列表在真机测试是会出现不显示问题? 造成原因:在小程序map组件...
  • 更多微信小程序实例 下载 DEMO下载 效果图 WXML view class=&amp;quot;tui-fixed-left&amp;quot;&amp;gt; scroll-view class=&amp;quot;tui-city-scroll&amp;...
  • 微信小程序---登录页面

    千次阅读 2018-05-04 10:11:02
    开发微信小程序,代码构成是由JSON配置、WXML模板、WXSS样式、JS逻辑交互组成。一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本...
  • 微信小程序-- 弹出框提交信息 <view class="mask" wx:if="{{showModalStatus}}" bindtap="colse"></view> <view class="drawerBox" wx:if="{{showModalStatus}}"> <image class="close" src=...
  • 微信小程序---问卷调查

    千次阅读 2020-01-08 23:34:43
    margin: 100px; align-items: center; } */ . Name { display : flex ; flex - direction : row ; margin - bottom : 10 px ; } . Age { display : flex ; flex - direction : row ; ...
  • 微信小程序 -- 插入html代码

    千次阅读 2019-10-23 10:37:13
    方法1:使用微信小程序组件rich-text 1. js文件中 content内容为html代码,使用replace() 方法进行字符的替换,达到预期的效果(不需要改,直接复制即可)。 Page({ /** * 页面的初始数据 */ data: { ...
  • 效果展示 Demo代码 index.wxml <text>slider组件自定义</text> {{value}} <view class="component-slider"> <!-- 覆盖slider组件盒子 -->...view class="slider-btn" style="margin-l
  • 微信小程序 --- 星级评价效果

    千次阅读 2018-03-20 15:35:22
    margin-bottom : 2 % ; } .r_bottom image { width : 130 px ; height : 18 px ; } app.sysInfo()封装在了app.js 文件全局使用下面是代码部分 /** * 获取系统信息 */ sysInfo: ...
  • 微信小程序--萌系登陆界面

    千次阅读 2021-01-30 14:27:22
    margin-left: -200rpx; } .head { width: 400rpx; height: 200rpx; } .hand { width: 68rpx; height: 68rpx; border-radius: 80rpx; background-color: #472d20; transform: scaleY(0.6); transition: 0.3s ease-...
  • background: -webkit-gradient(linear, left top, left bottom, from(rgba(244, 244, 244, 0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); opacity: 0; transform: translate3d(0, 100%, 0); animation: rise 3s ...
  • 有时候很久没发朋友圈了突然手痒痒,又不知道发什么好,突然想到自己手头上有个毒鸡汤和励志鸡汤的数据库,大概两万多条,想着无事就把它做成一个小程序,以后想看什么就去里面看看,有励志也有搞笑的。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,915
精华内容 3,566
关键字:

微信小程序margin-bottom

微信小程序 订阅