小程序 - scroll-view 滑动切换（三元运算符）

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/86705886

//用户从键盘输入三个整数，并最大者输出

//1.0 定义三个变量，接受用户输入的值
var num1, num2, num3;

//2.0 利用prompt()接收用户输入的值，Number()并改变输出值的类型
num1 = Number(prompt('请输入第一个值：'));
num2 = Number(prompt('请输入第二个值：'));
num3 = Number(prompt('请输入第三个值：'));

//3.0 定义变量保存最大值
var max;

//4.0 利用三目运算符进行两两比较
max = num1 > num2 ? num1 : num2;
max = max > num3 ? max : num3;

//5.0 输出结果
console.log('最大值为：' + max);

<template>
<view class="m-swiper-list">
    <scroll-view scroll-x="true" class="navbar-box" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
        <repeat for="{{list}}" key="index" index="index" item="item">
            <view class="m-list-box {{index == model_index?'open':''}}" data-index='{{index}}' @tap="selectRule">
                <view class="m-item">
                    <image mode="aspectFill" src="{{item.img}}" class="wrap-img"></image>
                    <image mode="widthFix" src="/images/icon-select.png" class="select-img"></image>
                </view>
            </view>
        </repeat>
    </scroll-view>
</view>

<view class="font-md padding-box">选择预约时间</view>
<view class="m-input-row form-box">
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2025-09-01" bindchange="bindDateChange">
        <wxc-input type="text" disabled="true" mode="wrapped" placeholder="请选择预约的时间"></wxc-input>
    </picker>
</view>

<view class="font-md padding-box">配送信息</view>
<view class="m-input-row form-box">
    <button class="btn" @tap="getUseraAddress">地址</button>
    <wxc-input type="text" disabled="true" mode="wrapped" placeholder="请选择收货人地址"></wxc-input>
</view>
</template>

<script>
import wepy from 'wepy';
import navBar from '../../components/navbar/index';

export default class extends wepy.page {
  config = {
    navigationBarTitleText: '在线充气',
    navigationBarBackgroundColor: '#ff6767',
    navigationBarTextStyle: 'white',
    usingComponents: {
        'wxc-input': '../../../minui/@minui/wxc-input/dist/index',
        'wxc-select': '../../../minui/@minui/wxc-select/dist/index'
    }
  }
  components= {
    navbar: navBar
  }
  data = {
    navScrollLeft: 0,
    model_index:0,
    list: [
        {img: 'http://img.weiye.me/zcimgdir/thumb/t_150001571859686c66373ca.jpg'},
        {img: 'http://img.weiye.me/zcimgdir/album/file_59686b90612c4.jpg'},
        {img: 'http://img.weiye.me/zcimgdir/album/file_59686b90612c4.jpg'},
        {img: 'http://img.weiye.me/zcimgdir/album/file_59686b90612c4.jpg'}
    ]
  }
  prop = {
    product: Object,
  }
  methods = {
    //页面跳转
    navigateUrl(e) {
        var that = this
        var url = e.currentTarget.dataset.url;
        url && wx.navigateTo({
            url : url
        })
    },
    //切换
    selectRule(e) {
        var that = this;
        this.model_index = e.currentTarget.dataset.index
    },
    //官方地图
    getUseraAddress() {
        wx.chooseAddress({
            success: function (res) {
                console.log(res.userName)
                console.log(res.postalCode)
                console.log(res.provinceName)
                console.log(res.cityName)
                console.log(res.countyName)
                console.log(res.detailInfo)
                console.log(res.nationalCode)
                console.log(res.telNumber)
            }
        })
    }
  }
}
</script>

<style lang="less">
page {
  position: relative;
  min-height: 100%;
  background: #f4f5f9;
}
/* 处理 scroll-view 滚动轴的问题 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>

效果图：